摘要：深入布局盒模型元素分類(lèi)在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。規(guī)定元素和屬性是包含元素的邊框內(nèi)邊距內(nèi)容的。后來(lái)微軟也慢慢轉(zhuǎn)向了的標(biāo)準(zhǔn)，在以后支持了標(biāo)準(zhǔn)盒模型。行內(nèi)級(jí)元素屬性取的元素。

????在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們來(lái)深入學(xué)習(xí)一下css布局相關(guān)的知識(shí)。

盒模型

IE盒模型
W3C盒模型
box-sizing



元素的分類(lèi)

塊級(jí)元素
行內(nèi)元素
行內(nèi)塊級(jí)元素
行框



定位與浮動(dòng)

文檔流
包含塊
浮動(dòng)清除


margin問(wèn)題

**格式化上下文（formatting context）
BFC、IFC、FFC、GFC


常見(jiàn)布局實(shí)戰(zhàn)

水平垂直居中
兩欄 & 三欄布局
...

1.1 IE盒模型與W3C盒模型

首先大家都知道一個(gè)頁(yè)面是由眾多HTML元素組成的，每一個(gè)元素都有自己的一個(gè)矩形的顯示區(qū)域，這就是我們平時(shí)經(jīng)常提及的css盒模型。

這個(gè)盒模型或者說(shuō)這個(gè)矩形的顯示區(qū)域呢 就是向下面這張圖一樣，包括四部分：

margin(外邊距)+border(邊框)+padding(內(nèi)邊距)+content(內(nèi)容)

在css的發(fā)展歷程中，有兩種版本的盒模型，一個(gè)叫IE盒模型（又叫怪異盒模型），一個(gè)叫W3C標(biāo)準(zhǔn)盒模型，在早期的微軟出的IE瀏覽器中采用的是自己的盒模型標(biāo)準(zhǔn)成為IE盒模型或者叫怪異盒模型。

規(guī)定：元素width和height屬性是包含元素的border(邊框)+padding(內(nèi)邊距)+content(內(nèi)容)的。

而后來(lái)W3C組織（中文叫做萬(wàn)維網(wǎng)聯(lián)盟，是一家中立性的技術(shù)標(biāo)準(zhǔn)指定機(jī)構(gòu)），一個(gè)專(zhuān)門(mén)制定互聯(lián)網(wǎng)技術(shù)標(biāo)準(zhǔn)的機(jī)構(gòu)，為了標(biāo)準(zhǔn)化前端的技術(shù)規(guī)范，他規(guī)定了個(gè)標(biāo)準(zhǔn)稱(chēng)為W3C標(biāo)準(zhǔn)盒模型。

規(guī)定：元素width和height屬性只包含元素的content(內(nèi)容)。 

后來(lái)微軟也慢慢轉(zhuǎn)向了W3C的標(biāo)準(zhǔn)，在IE6以后支持了W3C標(biāo)準(zhǔn)盒模型。在我們現(xiàn)在的主流瀏覽器里面默認(rèn)都是使用w3c標(biāo)準(zhǔn)盒模型。

我們來(lái)看下面這張圖

在圖的上半部分中展示的W3C盒模型標(biāo)準(zhǔn)，比如我聲明一個(gè)div的width屬性為100px，那我只是規(guī)定了這個(gè)div的content內(nèi)容顯示區(qū)域的大小為100px，如果之后我再聲明div的padding為10px, border為15px solid black， 那么這個(gè)div最終的整體寬度就會(huì)變成 100 + 10 * 2 + 15 * 2 = 150px 了。

而如果同樣的css運(yùn)用到了IE盒模型身上那么當(dāng)我規(guī)定div的width屬性為100px時(shí)，他整體的寬度就已經(jīng)確定了，就是100px，再之后我去聲明div的padding為10px，border為15px solid black，也不會(huì)影響我這個(gè)div的整體寬度，只是會(huì)壓縮這個(gè)div的content內(nèi)容顯示區(qū)域的大小。

1.2 box-sizing

box-sizing干嘛用的？

我們剛在說(shuō)道目前主流瀏覽器默認(rèn)都是采用W3C盒模型，如果你就是想在這些瀏覽器里使用IE盒模型呢？你就需要使用box-sizing這個(gè)屬性，這是個(gè)css3中新出的屬性：默認(rèn)值是content-box就是指的使用W3C盒模型標(biāo)準(zhǔn)，另外一個(gè)值是border-box，指的就是我要在這個(gè)元素上使用IE盒模型標(biāo)準(zhǔn)。

#div1 {
    box-sizing: border-box || content-box(默認(rèn)值)
}

那么這里就有個(gè)問(wèn)題了，為啥W3C組織好不容易將IE盒模型摒棄調(diào)，統(tǒng)一了前端這個(gè)盒模型標(biāo)準(zhǔn)而且所有瀏覽器廠商也都默認(rèn)支持了，現(xiàn)在反而在css3中加入了box-sizing屬性讓我們可以自由選擇盒模型標(biāo)準(zhǔn)了呢？

答案就是W3C突然發(fā)現(xiàn)在某些情況下，IE盒模型比自己家的那個(gè)盒模型標(biāo)準(zhǔn)更好用。 =。=...（這就很尷尬了...） 于是在css3中加入了box-sizing這個(gè)屬性讓開(kāi)發(fā)者可以自由選擇要使用哪種標(biāo)準(zhǔn)（估計(jì)是被噴慘了...）

我們來(lái)看這樣一個(gè)例子：如果現(xiàn)在我們要實(shí)現(xiàn)這樣一個(gè)簡(jiǎn)單布局，我要一個(gè)div的整體寬度是頁(yè)面的50%，并且呢這個(gè)div還帶有一個(gè)10px的邊框。我們要怎么做呢？
如果我們用IE盒模型標(biāo)準(zhǔn)的話就很簡(jiǎn)單

    div{
        width: 50%;
        border: 10px solid black;
        box-sizing: border-box; /* 設(shè)置為IE盒模型標(biāo)準(zhǔn) */
    }

就可以了 是吧。

那么如果我們使用W3C盒模型呢。
我們知道如果我們聲明這個(gè)div寬度為50%，然后聲明border為10px的話 那么這個(gè)div實(shí)際寬度應(yīng)該是50% + 20px對(duì)吧 所以這樣不符合我們的要求，那么要怎么做呢。

????有2種方法。

再包裹一層div，讓外層div寬度為50%，然后讓內(nèi)層div有一個(gè)10px邊框，由于內(nèi)層div沒(méi)有是個(gè)塊級(jí)元素所以寬度會(huì)默認(rèn)撐滿父元素。代碼如下

另一種方法是使用css3的計(jì)算屬性calc()，將div的寬度設(shè)為50% - 20px，但是這個(gè)屬性兼容性一般。代碼如下

div{
    width: calc(50% - 20px);
    border: 10px solid black;
}

....顯然，IE盒模型的實(shí)現(xiàn)方案更加簡(jiǎn)潔和直觀。后來(lái)W3C也意識(shí)到了這個(gè)問(wèn)題 于是為了重新支持IE盒模型，W3C組織在CSS3中添加了box-sizing屬性，用于讓開(kāi)發(fā)者可以隨意切換這兩種盒模型。

2.1 塊級(jí)元素 & 行內(nèi)元素 & 行內(nèi)塊級(jí)元素

元素除了自己的盒模型外還有自己的分類(lèi)。從元素的布局特性來(lái)分，主要可以分為三類(lèi)元素：塊級(jí)元素，行內(nèi)元素，行內(nèi)塊級(jí)元素。

我們現(xiàn)在看下他們的定義：

塊級(jí)元素：display屬性取block、table、flex、grid和list-item的元素。
行內(nèi)級(jí)元素：display屬性取inline的元素。
行內(nèi)塊級(jí)元素：display屬性取inline-block、inline-table、inline-flex和inline-grid的元素

很多網(wǎng)上或者書(shū)上說(shuō)： div是個(gè)塊級(jí)元素，span是個(gè)行內(nèi)元素。這樣的說(shuō)法是不正確的，或者說(shuō)是不嚴(yán)謹(jǐn)?shù)?。我們只能說(shuō)div默認(rèn)是個(gè)塊級(jí)元素，span默認(rèn)是個(gè)行內(nèi)元素。就是因?yàn)槊總€(gè)元素初始都會(huì)帶有一些樣式屬性，而div默認(rèn)的display是block，span的display是inline。但是如果我們?cè)赾ss中去設(shè)置他們的display屬性就可以改變他們的類(lèi)型。

接下來(lái)我們看看他們都有什么特點(diǎn)，很簡(jiǎn)單

塊級(jí)元素

獨(dú)占一行顯示（width默認(rèn)為100%，height為0）；
可以設(shè)置尺寸屬性（width、height等）；

行內(nèi)元素

一行可以顯示多個(gè)；
不能設(shè)置寬高或者說(shuō)設(shè)置的width，height無(wú)效；
受父元素的text-align屬性和自身vertical-align屬性的控制，在水平方向上默認(rèn)左對(duì)齊，在垂直方向上默認(rèn)在行框的baseline基線上顯示（“行框”的概念，會(huì)在后面深入講解)

行內(nèi)塊級(jí)元素（ 結(jié)合了塊級(jí)元素和行內(nèi)元素的特征 ）

一行可以顯示多個(gè)；
可以設(shè)置尺寸屬性（width、height等）；
受父元素的text-align屬性和自身vertical-align屬性的控制

對(duì)于塊級(jí)元素很簡(jiǎn)單，沒(méi)有什么可說(shuō)的。就是一點(diǎn)，無(wú)論我們把塊級(jí)元素的寬度設(shè)置多小，他們也只能在一行里多帶帶顯示，而不會(huì)跟這個(gè)元素的兄弟元素在同一行顯現(xiàn)。

對(duì)于行內(nèi)或者行內(nèi)塊級(jí)元素來(lái)說(shuō)，有個(gè)小注意點(diǎn)。當(dāng)有多個(gè)這樣的元素并排排列時(shí) 你會(huì)發(fā)現(xiàn)他們之間是有幾像素的間距的，我們來(lái)看下面的代碼

    
    
    


    

        LearnInPro1
        LearnInPro2
        LearnInPro3
    

我們會(huì)發(fā)現(xiàn) 他們之間會(huì)有間距 像這樣:

這是由于我們?yōu)榱舜a的整潔和直觀，一般把每個(gè)標(biāo)簽在多帶帶一行里書(shū)寫(xiě)，這樣就造成了，標(biāo)簽之間會(huì)存在換行符，在渲染過(guò)程中，渲染引擎會(huì)認(rèn)為換行符是一種文本，所以導(dǎo)致了我們每個(gè)span之間就跟存在著一個(gè)空格一樣。

那么我們這里介紹兩個(gè)方法來(lái)消除這個(gè)間距

很簡(jiǎn)單，我們直接把span在一行里書(shū)寫(xiě)就好了，像這樣：

    LearnInPro1LearnInPro2LearnInPro3

由于渲染引擎認(rèn)為換行符是一種文本，那我把文本的font-size設(shè)為0不就可以了么。

注意：由于font-size屬性是一個(gè)可繼承屬性，所以在div上將font-size設(shè)為0后還需要再span上把font-size設(shè)回來(lái)，否則span里的文本的font-size也會(huì)變成0。像這樣：

div {
    font-size: 0;
}
span{
    font-size: 16px;
    background: blue;
}

2.2 行框

關(guān)于元素分類(lèi)，我們?cè)賮?lái)講一個(gè)概念，叫做行框。

我們現(xiàn)在看下行框的概念：子元素的虛擬矩形區(qū)域，形成的每一行。這個(gè)概念有點(diǎn)抽象，我們結(jié)合下面這張圖來(lái)理解下。

我們可以看到，

當(dāng)行內(nèi)元素或者行內(nèi)塊級(jí)元素并排排列的時(shí)候，可能他們的字體大小，高度都是不一樣的。那么行框就是包裹他們的一個(gè)框。就是圖中Line box所指的區(qū)域。
行框規(guī)定了這些元素排列時(shí)候的對(duì)齊方式。默認(rèn)他們的對(duì)齊方式是根據(jù)baseline基準(zhǔn)線對(duì)齊。就如同圖上的對(duì)齊方式一樣。
在行框中，我們利用vertical-align來(lái)改變他們的對(duì)齊方式。他的值有很多，常用的有top，middle，bottom等，這個(gè)比較簡(jiǎn)單就不多介紹了。

要特別注意的點(diǎn)有兩個(gè)

我們說(shuō)過(guò)行內(nèi)元素是不能設(shè)置高度的，那么他的高度是如何決定的呢？ 任何一個(gè)行內(nèi)元素，他的高度是由font-size和line-height共同決定的。

首先，文本的高度是跟line-height無(wú)關(guān)的。我們可以給span設(shè)置一個(gè)背景色，然后我們改變他的line-height會(huì)發(fā)現(xiàn)，無(wú)論line-height設(shè)置成多高，span的背景色的高度都不會(huì)改變，但是span整體的高度會(huì)隨line-height的增大而變高。所以說(shuō)文本的高度是跟line-height無(wú)關(guān)的(注意這里說(shuō)的是文本)。

那么，文本的高度只跟font-size有關(guān)，但是注意，文本的高度永遠(yuǎn)會(huì)大于font-size的值，就像下面這張圖。font-size的大小只是規(guī)定了text-top到text-bottom的距離，而文本高度是top到bottom的距離，而這之間的距離是多少，每個(gè)瀏覽器都不太一樣。總之是為了保護(hù)文本，不希望行與行之間產(chǎn)生重疊。（ 如果你強(qiáng)行將line-height設(shè)置的特別小，希望產(chǎn)生重疊，在大部分現(xiàn)代瀏覽器中是無(wú)效的，也就是在大部分瀏覽器中l(wèi)ine-height的值最小等于文本的高度，所以不建議將line-height設(shè)的比文本高度小。 ）
所以，行內(nèi)元素的高度（不折行的情況下）當(dāng)沒(méi)設(shè)置line-height或者line-height小于等于文本的內(nèi)容高度時(shí)，行內(nèi)元素高度取決于font-size，等于文本的高度。 當(dāng)line-height大于文本高度時(shí)，則由line-height決定。

當(dāng)行內(nèi)元素和行內(nèi)塊級(jí)元素在一個(gè)行框內(nèi)排列的時(shí)候，比如：

    
    
    

    
    

        LearnInPro
        

    

就會(huì)變成下圖這樣

我們前面說(shuō)過(guò) 這兩個(gè)元素中間的空隙是由于換行符導(dǎo)致的，并且也介紹了解決方案，而這次要說(shuō)的是這個(gè)紅色的行內(nèi)塊級(jí)元素下方的空隙，這個(gè)就是由于行框默認(rèn)的對(duì)齊方式導(dǎo)致的。由于行框默認(rèn)是baseline對(duì)齊，行內(nèi)塊級(jí)元素也要遵守所以這個(gè)紅框的底部會(huì)騎在baseline線上。導(dǎo)致baseline到bottom的區(qū)域空著，產(chǎn)生空隙。那么解決方案也很簡(jiǎn)單，只要改變行框的對(duì)齊方式，在這兩個(gè)元素上都加上vertical-align: top || middle || bottom 等就可以把這個(gè)空隙消除掉。

由于css布局相關(guān)知識(shí)，比較重要，知識(shí)點(diǎn)也比較多。我們下篇文章再來(lái)介紹其他的知識(shí)點(diǎn)。

最后你覺(jué)得我們的文章對(duì)你有幫助，歡迎關(guān)注我們的 微信公眾號(hào)LearnInPro，在上面你可以第一時(shí)間獲取到我們的技術(shù)文章，并且你可以隨時(shí)在上面向我們提問(wèn)，把你在學(xué)習(xí)前端過(guò)程中所遇到的問(wèn)題發(fā)給我們。我們每天都會(huì)按時(shí)回復(fù)大家的每一個(gè)問(wèn)題，希望LearnInPro可以伴隨你從入門(mén)到專(zhuān)家。