資訊專欄INFORMATION COLUMN
摘要：常用于控制頁面布局的定位機(jī)制普通流相對(duì)定位絕對(duì)定位和固定定位。左右布局最常用的就是通過浮動(dòng)左浮或右浮來實(shí)現(xiàn)浮動(dòng)。可以通過設(shè)置左右的外邊距為值來居中包括圖片。
這里，就CSS左右布局，左中右布局，水平與垂直居中，進(jìn)行討論。
CSS常用于控制頁面布局的定位機(jī)制：
普通流、相對(duì)定位、絕對(duì)定位和固定定位。還可以使用float屬性來讓元素浮動(dòng)。
最常用的就是通過浮動(dòng)（左浮或右浮）來實(shí)現(xiàn)浮動(dòng)。
float屬性允許你將普通流中的元素在它的包含元素內(nèi)盡可能的向左或向右排列。
你應(yīng)該設(shè)置margin屬性來制定浮動(dòng)元素之間的間距。
不同元素的高度和寬度不同，為防止浮動(dòng)元素的后一元素自動(dòng)上浮，可以為父元素賦予clearfix類來清除浮動(dòng)解決這一問題。
leftright
同時(shí)在CSS中關(guān)于偽類作出聲明：
.clearfix::after {
content: "";
display: block;
clear: both;
}
設(shè)置左浮動(dòng)（或右浮動(dòng)），將兩個(gè)子元素左右并排實(shí)現(xiàn)布局：
.descendant1,
.descendant1 {
float: left;
margin-left: 30px;
}
還可以通過絕對(duì)定位,通過元素脫離文檔流來實(shí)現(xiàn)。
leftright
.parent {
position: relative;
}
.descendant1 {
position: absolute;
left: 0;
top: 0;
}
.descendant2 {
position: absolute;
left: 60px;
top: 0;
}
2.左中右布局
我們類比左右布局，在此基礎(chǔ)上實(shí)現(xiàn)由兩個(gè)元素變?yōu)槿齻€(gè)元素的布局。
通過全部左浮（或右浮）實(shí)現(xiàn)：
leftcenterright
.descendant1,
.descendant2,
.descendant3 {
float: left;
margin-left: 20px;
}
同理，第一個(gè)元素左浮，第三個(gè)元素右浮；同時(shí)設(shè)置三個(gè)元素為內(nèi)聯(lián)元素：
.descendant1 {
float: left;
margin-left: 20px;
display: inline-block;
}
.descendant2 {
margin-left:20px;
display: inline-block;
}
.descendant3 {
float: right;
margin-right: 260px;
display: inline-block;
}
通過絕對(duì)定位：
leftcenterright
.parent {
position: relative;
}
.descendant1 {
position: absolute;
left: 0;
top: 0;
}
.descendant2 {
position: absolute;
left: 60px;
top: 0;
}
.descendant3 {
position: absolute;
left: 120px;
top: 0;
}
3.水平居中
文字居中：
text-align: center;
如果想讓一個(gè)元素水平居中，首先確定你已經(jīng)給元素設(shè)定了一個(gè)寬度（否則將溢滿整個(gè)屏幕）。
可以通過設(shè)置左右的外邊距為auto值來居中（包括圖片）。
You can go to everywhere.
If you like.
p.text {
max-width: 300px;
text-align: center;
margin: 0 auto;
}
4.垂直居中
在單行文本或按鈕、小圖中的文字很使用的方法，即設(shè)置行高與元素高度一致即可。
button
p.text {
height: 60px;
line-height: 60px;
}
也可以根據(jù)實(shí)際需要尺寸，為所在元素設(shè)置上下的padding來實(shí)現(xiàn)居中:
p.text {
padding: 15px 0;
line-height: 60px;
}
Written by：EdenSheng
Email：singlesaulwork@gmail.com
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/117034.html
摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...
摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到。可以通過設(shè)置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 本文首發(fā)于知乎專欄：前端指南 CSS布局 布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...
摘要：到此，我們了解常見的布局解決方案，這些只是參考，一樣的布局實(shí)現(xiàn)方式多種多樣。主要就使用從很久很久以前起，我們就拋棄了布局頁面，但是異常強(qiáng)大等屬性目前兼容性較差傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器轉(zhuǎn)自常見布局解決方案 水平居中布局 1.margin + 定寬 Demo .child { width: 100px; margin: 0 auto; } ...
閱讀 2751·2023-04-25 17:37
閱讀 1345·2021-11-24 10:29
閱讀 3936·2021-09-09 11:57
閱讀 881·2021-08-10 09:41
閱讀 2420·2019-08-30 15:55
閱讀 2951·2019-08-30 15:54
閱讀 2122·2019-08-30 15:53
閱讀 1189·2019-08-30 15:43
