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