# 網(wǎng)頁的布局方式(標準流/浮動流/定位流)
# 浮動元素的脫標
# 浮動元素排列規(guī)則
# 貼靠現(xiàn)象
# 清除浮動(height/clear屬性/隔墻法)
什么是網(wǎng)頁的布局方式?
網(wǎng)頁的布局方式其實就是指瀏覽器是如何對網(wǎng)頁中的元素進行排版的
1.標準流(文檔流/普通流)排版方式
1.1其實瀏覽器默認的排版方式就是標準流的排版方式
1.2在CSS中將元素分為三類,分別是塊級元素/行內(nèi)元素/行內(nèi)塊級元素
1.3在標準流中有兩種排版方式,一種是垂直排版,一種是水平排版
垂直排版,塊級元素間排版是垂直排布
水平排版,行內(nèi)元素之間是水平排布
2.浮動流排版方式
2.1 浮動流是一種”半脫離標準流”的排版方式
2.2 浮動流是有一種排版方式,就是水平排版,它只能設置某個元素左對齊或者右對齊
注意點:
1.浮動流中沒有居中對齊,也就是沒有center取值
2.在浮動流中不可以使用margin: 0 auto;
特點:
1.在浮動流中是不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素的
無論是塊級元素/行內(nèi)元素/行內(nèi)塊級元素都可以水平排版
2.在浮動流中無論是塊級元素/行內(nèi)元素/行內(nèi)塊級元素都可以設置寬高
3.綜上所述,浮動流中的元素和標準流中的行內(nèi)元素很像
3.定位流排版方式
1.什么是浮動元素的脫標
脫標:脫離標準流
-當某一個元素浮動之后,那么這個元素看上去就像被從標準流中刪除了一樣,這個就是浮動元素的脫標
2.浮動元素脫標之后會有什么影響
-如果前面一個元素浮動了,而后面一個元素沒有浮動,那么這個時候前面的一個元素就會蓋住后面的一個元素
1.浮動元素排序規(guī)則
1.1 相同方向上的浮動元素,先浮動的元素會顯示在前面,后浮動的元素會顯示在后面
1.2 不同方向上的浮動元素,左浮動會找左浮動,右浮動會找右浮動
1.3 浮動元素浮動之后的位置,由浮動元素之前在標準流中的位置來確定
什么是貼靠現(xiàn)象
-如果父元素的寬度能夠顯示所有浮動元素, 那么浮動的元素會并排顯示
-如果父元素的寬度不能顯示所有浮動元素, 那么會從最后一個元素開始往前貼靠
-如果貼靠了前面所有浮動元素之后都不能顯示, 最終會貼靠到父元素的左邊或者右邊
什么是浮動元素字圍現(xiàn)象?
-浮動元素雖然蓋住了沒有浮動的元素,但是不會蓋住沒有浮動元素的內(nèi)容
作用:
圖文混排
1.企業(yè)開發(fā)中什么時候使用標準流什么時候使用浮動流?
垂直方向使用標準流,水平方向使用浮動流
2.拿到一個很復雜的界面如何入手?
2.1從上至下布局
2.2 從外到內(nèi)布局
2.3 水平方向可以先劃分為一左一右再對左邊或者右邊進行進一步布局
注意點:
1.在標準流中內(nèi)容的高度可以撐起父元素的高度
2.在浮動流浮動的元素是不可以撐起父元素的高度的
清除浮動的方式
1.清除浮動的方式一1??
-給前面一個父元素設置高度
注意點:
在企業(yè)開發(fā)中我們能不寫高度就不寫高度
所以這種方法我們用得比較少
2.清除浮動的方式二2??
給后面的盒子添加clear屬性
clear屬性取值:
left? ? ? 在左側不允許浮動元素
right? ? 在右側不允許浮動元素
both? ? 在兩邊都不允許浮動元素
none ? 默認,兩側都允許浮動元素
inherit 繼承父類的屬性
注意點:
當我們給某個元素添加clear屬性之后,這個元素的margin屬性就會失效
margin失效原因:
3.清除浮動的方式三3??
隔墻法:外墻法/內(nèi)墻法
外墻法:
1.在兩個盒子之間添加一個額外的塊級元素添
2.給這個額外添加的盒子添加clear:both;屬性
注意點:
外墻法可以讓第二個盒子使用margin-top屬性
外墻法不可以讓第一個盒子使用margin-bottom屬性
內(nèi)墻法:
1在第一個盒子中所有子元素最后添加一個額外的塊級元素
2給這個額外添加的塊級元素添加clear: both;屬性
注意點:
內(nèi)墻法可以讓第二個盒子使用margin-top屬性
內(nèi)墻法可以讓第一個盒子使用margin-bottom屬性
4.外墻法和內(nèi)墻法區(qū)別?
外墻法不能撐起第一個盒子額高度,而內(nèi)墻法可以撐起第一個盒子的高度
清除浮動的方式四4??
.box1::after{
/*設置添加的子元素的內(nèi)容*/
content: ””;
/*設置添加的子元素為塊級元素*/
display: block;
/*設置添加的子元素的高度為0*/
height: 0;
/*設置添加的子元素看不見*/
visibility: hidden;
/*給添加的子元素設置clear: both;*/
clear: both;
}
.box1{
/*兼容IE6*/
*zoom: 1;
}
清除浮動的方式五5??
添加overflow: hidden;
.box1{
overflow: hidden;
/*兼容IE6*/
*zoom: 1;
}
overflow: hidden;
1.1可以將超出標簽范圍的內(nèi)容裁減掉
1.2清除浮動
1.3可以通過overflow: hidden;讓里面的盒子設置margin-top之后,外面的盒子不被頂下來
/*設置添加的元素看不見*/
visibility: hidden;
overflow: hidden;
1.1可以將超出標簽范圍的內(nèi)容裁減掉
1.2清除浮動
1.3可以通過overflow: hidden;讓里面的盒子設置margin-top之后,外面的盒子不被頂下來
注意:
如果用于清除浮動,會不支持IE6
/*兼容IE6*/
*zoom: 1;
