1、CSS布局的三種機(jī)制

網(wǎng)頁(yè)布局的核心——就是用CSS來(lái)擺放盒子位置。

CSS提供部分了3種機(jī)制來(lái)設(shè)置盒子的擺放位置：

普通流（標(biāo)準(zhǔn)流）

浮動(dòng)（讓盒子從普通流中浮起來(lái) —— 讓多個(gè)盒子(div)水平排列成一行）

定位（將盒子定在某一個(gè)位置 自由的漂浮在其他盒子的上面 —— CSS 離不開(kāi)定位，特別是后面的 js 特效）

2，為什么使用定位？

我們先來(lái)看一個(gè)效果，同時(shí)思考一下用標(biāo)準(zhǔn)流或浮動(dòng)能否實(shí)現(xiàn)類(lèi)似的效果？

小黃色塊在圖片上移動(dòng)，吸引用戶(hù)的眼球。

2.當(dāng)我們滾動(dòng)窗口的時(shí)候，盒子是固定屏幕某個(gè)位置的。

結(jié)論：要實(shí)現(xiàn)以上效果，標(biāo)準(zhǔn)流或浮動(dòng)都無(wú)法快速實(shí)現(xiàn)

3. 定位詳解

定位也是用來(lái)布局的，它有兩部分組成：定位 = 定位模式 + 邊偏移

3.1邊偏移

簡(jiǎn)單說(shuō)， 我們定位的盒子，是通過(guò)邊偏移來(lái)移動(dòng)位置的。

在 CSS 中，通過(guò) top、bottom、left 和 right 屬性定義元素的邊偏移：（方位名詞），定位的盒子有了邊偏移才有價(jià)值。 一般情況下，凡是有定位地方必定有邊偏移。

3.2定位模式 (position)

在 CSS 中，通過(guò) position 屬性定義元素的定位模式，語(yǔ)法如下：

選擇器 { position: 屬性值; }

定位模式是有不同分類(lèi)的，在不同情況下，我們用到不同的定位模式。

|值| 語(yǔ)義 |

|static|靜態(tài)定位|

| relative | 相對(duì)定位 |

|absolute | 絕對(duì)定位 |

|fixed|固定定位|

3.2.1 靜態(tài)定位(static) - 了解

靜態(tài)定位是元素的默認(rèn)定位方式，無(wú)定位的意思。它相當(dāng)于 border 里面的none， 不要定位的時(shí)候用。

靜態(tài)定位 按照標(biāo)準(zhǔn)流特性擺放位置，它沒(méi)有邊偏移。

靜態(tài)定位在布局時(shí)我們幾乎不用的

3.2.1 相對(duì)定位(relative) - 重要

相對(duì)定位是元素相對(duì)于它 原來(lái)在標(biāo)準(zhǔn)流中的位置 來(lái)說(shuō)的。（自戀型）

效果圖：

相對(duì)定位的特點(diǎn)：（務(wù)必記住）

相對(duì)于 自己原來(lái)在標(biāo)準(zhǔn)流中位置來(lái)移動(dòng)的

原來(lái)在標(biāo)準(zhǔn)流的區(qū)域繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待它

- 3.2.3 絕對(duì)定位(absolute) - 重要

絕對(duì)定位是元素以帶有定位的父級(jí)元素來(lái)移動(dòng)位置 （拼爹型）

完全脫標(biāo) —— 完全不占位置；

父元素沒(méi)有定位，則以瀏覽器為準(zhǔn)定位（Document 文檔）

絕對(duì)定位的特點(diǎn)：（務(wù)必記?。?/p>

絕對(duì)是以帶有定位的父級(jí)元素來(lái)移動(dòng)位置 （拼爹型） 如果父級(jí)都沒(méi)有定位，則以瀏覽器文檔為準(zhǔn)移動(dòng)位置

不保留原來(lái)的位置，完全是脫標(biāo)的。

因?yàn)榻^對(duì)定位的盒子是拼爹的，所以要和父級(jí)搭配一起來(lái)使用。

定位口訣 —— 子絕父相

剛才咱們說(shuō)過(guò)，絕對(duì)定位，要和帶有定位的父級(jí)搭配使用，那么父級(jí)要用什么定位呢？

子絕父相 —— 子級(jí)是絕對(duì)定位，父級(jí)要用相對(duì)定位。

子絕父相是使用絕對(duì)定位的口訣，要牢牢記?。?/p>

3.2.4 固定定位(fixed) - 重要

固定定位是絕對(duì)定位的一種特殊形式： （認(rèn)死理型） 如果說(shuō)絕對(duì)定位是一個(gè)矩形 那么 固定定位就類(lèi)似于正方形

完全脫標(biāo) —— 完全不占位置；

只認(rèn)瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來(lái)設(shè)置元素的位置；

跟父元素沒(méi)有任何關(guān)系；單獨(dú)使用的

不隨滾動(dòng)條滾動(dòng)。

4. 定位(position)的擴(kuò)展

4.1 絕對(duì)定位的盒子居中

注意：絕對(duì)定位/固定定位的盒子不能通過(guò)設(shè)置 margin: auto 設(shè)置水平居中。

要這樣使用：

left: 50%;：讓盒子的左側(cè)移動(dòng)到父級(jí)元素的水平中心位置；

margin-left: -100px;：讓盒子向左移動(dòng)自身寬度的一半。

4.2 堆疊順序（z-index）

在使用定位布局時(shí)，可能會(huì)出現(xiàn)盒子重疊的情況。

加了定位的盒子，默認(rèn)后來(lái)者居上， 后面的盒子會(huì)壓住前面的盒子。

應(yīng)用 z-index 層疊等級(jí)屬性可以調(diào)整盒子的堆疊順序。

z-index 的特性如下：

屬性值：正整數(shù)、負(fù)整數(shù)或 0，默認(rèn)值是 0，數(shù)值越大，盒子越靠上；

如果屬性值相同，則按照書(shū)寫(xiě)順序，后來(lái)居上；

數(shù)字后面不能加單位。

注意：z-index 只能應(yīng)用于相對(duì)定位、絕對(duì)定位和固定定位的元素，其他標(biāo)準(zhǔn)流、浮動(dòng)和靜態(tài)定位無(wú)效

4.3 定位改變display屬性

前面我們講過(guò)， display 是 顯示模式， 可以改變顯示模式有以下方式:

可以用inline-block 轉(zhuǎn)換為行內(nèi)塊

可以用浮動(dòng) float 默認(rèn)轉(zhuǎn)換為行內(nèi)塊（類(lèi)似，并不完全一樣，因?yàn)楦?dòng)是脫標(biāo)的）

絕對(duì)定位和固定定位也和浮動(dòng)類(lèi)似， 默認(rèn)轉(zhuǎn)換的特性 轉(zhuǎn)換為行內(nèi)塊。

所以說(shuō)， 一個(gè)行內(nèi)的盒子，如果加了浮動(dòng)、固定定位和絕對(duì)定位，不用轉(zhuǎn)換，就可以給這個(gè)盒子直接設(shè)置寬度和高度等。

同時(shí)注意：

浮動(dòng)元素、絕對(duì)定位(固定定位）元素的都不會(huì)觸發(fā)外邊距合并的問(wèn)題。 （我們以前是用padding border overflow解決的）

也就是說(shuō)，我們給盒子改為了浮動(dòng)或者定位，就不會(huì)有垂直外邊距合并的問(wèn)題了。