####一恭应、網(wǎng)頁布局
網(wǎng)頁的布局方式其實就是指瀏覽器是如何對網(wǎng)頁中的元素進行排版的
1. 標準流(文檔流/普通流)排版方式
- 其實瀏覽器默認的排版方式就是標準流的排版方式
- 在CSS中將元素分為三類,分別是塊級元素/行內(nèi)元素/行內(nèi)塊級元素
- 在標準流中有兩種排版方式,一種是垂直排版,一種是水平排版.如果是塊級元素就是垂直排版,如果是行內(nèi)塊級或者是行內(nèi)元素時就是水平排版
- 標準流中內(nèi)容的高度可以撐起父元素的高度
2. 浮動流排版方式
- 浮動流是一種"半脫離標準流"的排版方式
- 浮動流只有一種排版方式,就是水平排版,只能設置某個元素的左對齊或右對齊
- 浮動流不區(qū)分塊級,行內(nèi)塊級和行內(nèi)元素,都可以設置寬高
- 浮動元素的脫標:
當某個元素浮動的時候,這個元素看上去就像是從標準流中刪除了一樣.如果前面一個元素浮動了,后面一個元素沒有浮動,那么前面浮動元素就會蓋住后面的標準流元素 - 浮動元素排序規(guī)則:
- 相同方向上的浮動元素,先浮動的元素會顯示在前面,后浮動的元素會顯示在后面
- 不同方向上的元素,左浮動找左浮動,右浮動找右浮
- 浮動元素浮動之后的位置取決于它之前在標準流中的位置
- 浮動元素的貼靠現(xiàn)象:
如果父元素的寬度不夠,浮動元素會自動貼靠上上一個浮動元素,如果仍然不夠,便會貼靠最外層父元素,這時不管夠不夠都顯示 - 浮動元素的自圍現(xiàn)象(圖文混排):
浮動元素不會覆蓋標準流中的文字,文字會自動包裹浮動元素 - 浮動元素不能撐起父元素的高度
注意:
- 浮動流中沒有居中對齊,float沒有center這個取值
- 在浮動流中不能使用margin:0 auto;
3. 清除浮動
- 給盒子添加一個高度,但是在企業(yè)開發(fā)中不常用,能不設置高度就不設置高度
-
clear:both
none: 默認取值, 按照浮動元素的排序規(guī)則來排序(左浮動找左浮動, 右浮動找右浮動)
left: 不要找前面的左浮動元素
right: 不要找前面的右浮動元素
both: 不要找前面的左浮動元素和右浮動元素
注意:當給某個元素添加clear屬性后,那么這個屬性的margin屬性就會失效 - 隔墻法(在企業(yè)開發(fā)中不常用)
- 外墻法:兩個盒子之間添加一個額外的塊級元素,給他設置clear:both屬性
注意:外墻法可以讓第二個盒子使用margin:top但是不能使用第一個盒子的margin:buttom,所以我們哪個都不用,我們直接設置墻的高度以達到margin效果 - 內(nèi)墻法:在第一個盒子最后設置一個塊級元素,給他設置一個clear:both屬性.
區(qū)別:外墻法不能撐起第一個盒子的高度而內(nèi)墻法可以撐起
- 偽元素選擇器(推薦使用)
名稱::before{ 屬性名稱:值; }:給指定標簽的內(nèi)容前面添加一個子元素
名稱::after{ 屬性名稱:值; }:給指定標簽的內(nèi)容后面添加一個子元素
visibility:hidden可以將添加的子元素隱藏
清除浮動代碼:
名稱::after{
content:"";
height:0;
display:block;
clear:both;
visibility:hidden;
}
名稱{
*zoom:1;/*兼容IE6*/
}
- 利用overflow:hidden清除浮動(推薦使用)
overflow:hidden:超標標簽的內(nèi)容裁剪掉,還可以用來清除浮動,在第一個標簽中添加overflow:hidden,但是還得加上*zoom:1;以保持IE6的兼容
兩個盒子嵌套時,里面的盒子設置margin-top時會把大盒子也頂下來(margin塌陷),這時除了可以設置大盒子的邊框外,還可以在大盒子中添加overflow:hidden;即可解決
