網頁布局方式其實就是瀏覽器是如何對網頁中的元素進行排版的
1.標準流（文檔流、普通流）排版方式
1.1 其實瀏覽器默認排版方式就是標準流排版方式
1.2 CSS中將元素分為三類,分別為塊級元素、行內元素
行內塊級元素
1.3 在標準流中有兩種排版方式,一種是垂直排版一種是水平排版
垂直排版，如果元素是塊級元素，那么就會垂直排版
水平排版，如果元素是行內元素、行內塊級元素、那么就會水平排版
- 浮動流的排版方式
2.1 浮動流是 一種“半脫離標準流”的排版方式
2.2 浮動流只有一種排版方式，那就是水平排版， 它只能設置某個元素左對齊或者右對齊
注意點：
1.浮動流中沒有居中對齊，也就是沒有center這個值
2.margin：0 auto; 這個不能使用的
特點：
1.浮動流中不區分塊級元素、行內元素、行內塊級元素，無論塊級元素、行內元素、行內塊級元素都是水平排版
2. 在浮動流中無論是塊級元素、行內元素、行內塊級元素都可以設置寬高
3.綜上所述：浮動流中的元素和標準流中的行內塊級元素很像
3.定位流排版方式
-
浮動元素脫標
4.1 浮動元素脫標就是脫離標準流當某一個元素浮動之后，那么這個元素看上去就像被標準流中刪除了一樣，這個就是浮動元素脫標
4.2 浮動元素脫標的影響
如果前面一個元素浮動了，而后面的一個元素沒有浮動，那么這個時候前面的一個元素就會蓋住后面的一個元素。
4.3 浮動元素的排序規則：
1.1 相同方向上的浮動元素，先浮動的元素會顯示在前面，后浮動的元素會顯示在后面
1.2 不同方向上的浮動元素，左浮動會找左浮動，右浮動會找右浮動
1.3 浮動元素浮動之后的位置，有浮動元素浮動之前在標準流中的位置決定的
-
浮動元素的貼靠現象
5.1 如果父元素的寬度能夠顯示所有浮動的元素，那么浮動的元素會并排顯示 5.2 如果父元素的寬度不能顯示所有浮動元素，那么會從最后一個元素開始往前貼靠 5.3 如果貼靠了前面所有浮動元素之后都不能顯示，最終會貼靠到父元素的左邊或者右邊 -
浮動元素的字圍現象
可以用來做圖文混排的效果，沒有浮動的元素會給浮動元素讓位置
7.開發中什么時候使用標準流什么時候使用浮動流？
垂直方向使用標準流，水平方向使用浮動流
對于一個復雜的界面
7.1 從上到下布局
7.2 從外向內布局
7.3 水平方向可以劃分為一左一右再對左邊或者右邊進行進一步布局
-
浮動元素的高度問題
在標準流中，內容的高度可以撐起父元素的高度，在浮動流中，浮動的元素不可以撐起父元素的高度的 清楚浮動的方式
方式一：
給前面一個父元素設置高度
方式二:給后面的盒子添加clear屬性
none:默認取值,按照浮動元素的排序規則來排序(左浮動找左浮動,右浮動找右浮動)
left: 不要找前面的左浮動元素
right:不要找前民的右浮動元素
both:不找左也不找右浮動
方式三:隔墻法
1.外墻法
2.1 在兩個盒子中間添加一個額外的塊級元素
2.2 給這個額外添加的塊級元素設置clear:both;屬性
2.內墻法
2.1 在第一個盒子的所有有子元素的最后添加一個額外的塊級元素
2.2 給這個額外添加的塊級元素設置clear:both;屬性
注意點:
在開發中能不設置高度就不設置高度
當我們給某個元素添加clear屬性之后,那么這個屬性
的margin屬性就會失效
外墻法:
外墻法可以讓第二個盒子使用margin-top屬性
不可以讓第一個盒子使用margin-bottom屬性
內墻法:
內墻法可以讓第一個盒子使用margin-bottom屬性
也可以讓第二個盒子使用margin-top屬性
區別:
外墻法不能夠撐起第一個盒子的高度,內墻法可以撐起第一個盒子的高度
10.偽元素選擇器
<style>
*{
margin:0;
padding:0;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
/* p{
width: 50px;
height: 50px;
background-color: pink;
}*/
div::before{
display: block;
width: 50px;
height: 50px;
content: '8888';
}
div::after{
/*指定添加的子元素中存儲的內容*/
content: '9999';
width: 50px;
height: 50px;
background-color: green;
display: block;
/*隱藏添加的子元素*/
visibility: hidden;
}
</style>
