摘要：下面我們就一步一步揭開(kāi)的神秘面紗，深入理解盒模型，這對(duì)我們?cè)诓季稚蠒?huì)有一個(gè)質(zhì)的提升。與內(nèi)聯(lián)元素的百分比值與內(nèi)聯(lián)元素。

css是一門(mén)具象語(yǔ)言，并不像js那樣具有邏輯性，因此，就算入行了前端很久的工程師，也覺(jué)得css難以掌握。下面我們就一步一步揭開(kāi)css的神秘面紗，深入理解css盒模型，這對(duì)我們?cè)诓季稚蠒?huì)有一個(gè)質(zhì)的提升。

盒子模型

相信很多人對(duì)這幅圖都不陌生，盒子模型簡(jiǎn)單點(diǎn)理解就是外邊距(margin)+邊框(border)+內(nèi)邊距(padding)+內(nèi)容(content)，頁(yè)面所呈現(xiàn)的效果其實(shí)就是一個(gè)個(gè)盒子堆疊而成的。每一個(gè)元素其實(shí)是包含了一個(gè)“外在盒子”和一個(gè)“內(nèi)在盒子”，其中“外在盒子”負(fù)責(zé)元素是一行顯示還是換行顯示，而“內(nèi)在盒子”則負(fù)責(zé)寬高、內(nèi)容展現(xiàn)。我們都知道inline-block（inline對(duì)應(yīng)于“外在盒子”，block對(duì)應(yīng)于“內(nèi)在盒子”），而block可以簡(jiǎn)單地理解為block-block，table為block-table（因?yàn)檫€有一個(gè)inline-table）。

內(nèi)聯(lián)盒模型

內(nèi)容區(qū)域(content area)

內(nèi)聯(lián)盒子(inline box)

行框盒子(line box)

包含盒子(containing box)

內(nèi)容區(qū)域(content area)。內(nèi)容區(qū)域指的是一種圍繞文字看不見(jiàn)的盒子，其大小僅受字符本身特性控制，本質(zhì)上是一個(gè)字符盒子(character box)；但是圖片這樣的替換元素，其顯示內(nèi)容不是文字，因此內(nèi)容區(qū)域可以看成是元素自身。

內(nèi)聯(lián)盒子(inline box)?！皟?nèi)聯(lián)盒子”不會(huì)讓內(nèi)容成塊顯示，而是排成一行，這里的內(nèi)聯(lián)盒子指的是元素的“外在盒子”，用來(lái)決定元素是內(nèi)聯(lián)還是塊級(jí)。該盒子又可以細(xì)分為“內(nèi)聯(lián)盒子”和“匿名內(nèi)聯(lián)盒子”。如下：

行框盒子(line box)。每一行就是一個(gè)行框盒子，每個(gè)行框盒子都是由一個(gè)個(gè)內(nèi)聯(lián)盒子組成，注意：line-height是作用在行框盒子上的，并最終決定高度(替換元素除外，后面會(huì)講解什么是替換元素)。

包含盒子(containing box)。此盒子由一行一行的“行框盒子”組成（css規(guī)范中，并沒(méi)有“包含盒子”的說(shuō)法，更準(zhǔn)確的稱(chēng)呼是“包含塊”(containing block)。

width

width的默認(rèn)值是auto，但很多人卻都不理解這個(gè)值是什么意思，因?yàn)閍uto在不同場(chǎng)景會(huì)有不同的表現(xiàn)：

fill-available

fit-content

min-content

max-content

fill-available：充分利用可用空間，例如div、p這些元素的寬度是默認(rèn)100%于父級(jí)容器的。但是width: auto卻不同于width: 100%，這是很多人不理解的地方。如果你設(shè)置了width: 100%，這里指的是內(nèi)容區(qū)域100%，即css3中的content-box，這時(shí)如果你設(shè)置了padding、border或者margin，元素都會(huì)撐破父元素，從而破壞布局。你當(dāng)然可以設(shè)置box-sizing: border-box，但可惜的是css3中沒(méi)有margin-box，這時(shí)候你如果設(shè)置了margin，依然會(huì)撐破父元素，但是width: auto卻不會(huì)，如下所示：

fit-content：收縮到合適，典型代表浮動(dòng)、絕對(duì)定位（有例外，設(shè)置了對(duì)立屬性：left、right、top、bottom時(shí)，寬度和高度由祖先元素position非static的元素決定，但是替換元素除外：img、video、canvas等）、inline-block、table。利用這個(gè)特性我們可以實(shí)現(xiàn)，文字整體居中，多行則居左顯示，如下：

min-content：收縮到最小。在表格中最常見(jiàn)，當(dāng)每一列空間都不夠的時(shí)候，文字能斷則斷，中文隨便斷，英文單詞不能斷?？梢愿鶕?jù)這個(gè)特性實(shí)現(xiàn)凹凸圖形等效果，如下：

max-content：超出容器限制，內(nèi)容很長(zhǎng)的連續(xù)英文或數(shù)字，或者內(nèi)聯(lián)元素被設(shè)置為了white-space: nowrap。

height

height的默認(rèn)值也是auto，指的是其高度由內(nèi)部元素堆疊而成，內(nèi)部元素盒子有多高，元素就有多高。但在絕對(duì)定位中，若同時(shí)設(shè)置了top與bottom，則其高度由父盒子高度減去top與bottom。

height: 100%。如果父元素height為auto，則子元素height:100%是無(wú)效的，要想子元素height: 100%生效，則：

父元素設(shè)定顯式高度值

使用絕對(duì)定位（絕對(duì)定位元素的百分比是根據(jù)padding box計(jì)算的，非絕對(duì)定位元素百分比是根據(jù)content box計(jì)算的）

替換元素

由于替換元素在很多表現(xiàn)上都與普通內(nèi)聯(lián)元素不一樣，因此在這里著重介紹一下替換元素。

根據(jù)“外在盒子”是內(nèi)聯(lián)還是塊級(jí)，我們把元素分為內(nèi)聯(lián)元素和塊級(jí)元素，而根據(jù)內(nèi)容是否可替換，我們把元素分為可替換元素和非替換元素。

，