什么是布局
現(xiàn)有樣式
- 文檔流
- 浮動(dòng)
- 定位
不能滿(mǎn)足人們的需求.
人們需要:
- 導(dǎo)航欄+內(nèi)容
- 導(dǎo)航欄+內(nèi)容+廣告欄
- 從上到下、從左到右、定寬、自適應(yīng)...
CSS 2 并沒(méi)有提供原生支持，所以需要將一些屬性組合起來(lái)，以實(shí)現(xiàn)布局
“DIV + CSS 布局”？
國(guó)外一般不這么叫.<div> 是一個(gè)無(wú)語(yǔ)義的標(biāo)簽，適合用來(lái)做與內(nèi)容無(wú)關(guān)的事情.
只能用<div> 嗎？
- 不一定
- 盡量使用有語(yǔ)義的標(biāo)簽
常見(jiàn)布局(pc)
-
固定寬度布局
所有的內(nèi)容都在頁(yè)面寬度范圍內(nèi),最多使用.
優(yōu)點(diǎn): 簡(jiǎn)單,每個(gè)分區(qū)的寬度都可以固定.
缺點(diǎn):瀏覽器寬度小于內(nèi)容寬度時(shí),會(huì)出現(xiàn)滾動(dòng)條. 彈性（fluid）布局
無(wú)固定寬度.一般需要百分比來(lái)適配
優(yōu)點(diǎn):頁(yè)面好看.
缺點(diǎn):無(wú)論設(shè)計(jì)還是實(shí)現(xiàn),都比較復(fù)雜,要考慮多種情況
- 響應(yīng)式布局 —— 多終端（PC、Pad、Phone）
常見(jiàn)具體布局
-
單列布局
實(shí)現(xiàn):
#定寬
width: 1000px; 或 max-width: 1000px;
#水平居中
margin-left: auto; margin-right: auto;
max-width 和 width的區(qū)別:
- 前者在瀏覽器寬度小于max-width情況下,顯示寬度為瀏覽器寬度.
- 后者在瀏覽器寬度小于width情況下,寬度不變,下方出現(xiàn)滾動(dòng)條.
優(yōu)化:
省標(biāo)簽，便于控制局部 范例
通欄
給通欄加背景色 范例
通欄優(yōu)化:
給 body 設(shè)置min-width 去掉滾動(dòng)背景色 bug
內(nèi)部元素水平居中
.parent{text-align:center;}
.child{display: inline-block;}
如果child高度不一致,需要設(shè)置
vertical-align:top實(shí)現(xiàn)頂部對(duì)齊.
IE 6 不支持 inline-block :
.child{*display: inline; *zoom: 1;}
bfc可以讓元素呈現(xiàn)塊級(jí)特性,即使是行內(nèi)元素
使用zoom1可以觸發(fā)bfc.設(shè)置height,width,
加*表示ie瀏覽器識(shí)別
-
雙列布局
一列固定寬度，另外一列自適應(yīng)寬度
如何實(shí)現(xiàn)
浮動(dòng)元素 + 普通元素margin 范例
<style>
#content:after{
content: '';
display: block;
clear: both;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: left;
}
.main{
margin-left: 210px;
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
</style>
<div id="content">
<div class="aside">aside</div>
<div class="main">content</div>
</div>
<div id="footer">footer</div>
如果側(cè)邊欄在右邊:
.aside{float: right;}
.main{ margin-right: 210px;}
注意:考慮到瀏覽器的渲染順序,
<div id="content">
<div class="aside">aside</div>
<div class="main">content</div>
</div>`
aside和main順序不可更改.
-
三列布局
兩側(cè)兩列固定寬度，中間列自適應(yīng)寬度
如何實(shí)現(xiàn)
#content:after{
content: '';
display: block;
clear: both;
}
.menu{
width: 100px;
height: 500px;
background: pink;
float: left;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: right;
}
.main{
margin-left: 110px; /*為什么要加margin-left*/
margin-right: 210px;
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
<div id="content">
<!-- 注意main的位置 -->
<div class="menu">aside</div>
<div class="aside">aside</div>
<div class="main">content</div>
</div>
<div id="footer">footer</div>
