摘要：下面我們就一步一步揭開的神秘面紗，深入理解盒模型，這對我們在布局上會有一個質(zhì)的提升。與內(nèi)聯(lián)元素的百分比值與內(nèi)聯(lián)元素。

css是一門具象語言，并不像js那樣具有邏輯性，因此，就算入行了前端很久的工程師，也覺得css難以掌握。下面我們就一步一步揭開css的神秘面紗，深入理解css盒模型，這對我們在布局上會有一個質(zhì)的提升。

盒子模型

相信很多人對這幅圖都不陌生，盒子模型簡單點理解就是外邊距(margin)+邊框(border)+內(nèi)邊距(padding)+內(nèi)容(content)，頁面所呈現(xiàn)的效果其實就是一個個盒子堆疊而成的。每一個元素其實是包含了一個“外在盒子”和一個“內(nèi)在盒子”，其中“外在盒子”負責(zé)元素是一行顯示還是換行顯示，而“內(nèi)在盒子”則負責(zé)寬高、內(nèi)容展現(xiàn)。我們都知道inline-block（inline對應(yīng)于“外在盒子”，block對應(yīng)于“內(nèi)在盒子”），而block可以簡單地理解為block-block，table為block-table（因為還有一個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ū)域指的是一種圍繞文字看不見的盒子，其大小僅受字符本身特性控制，本質(zhì)上是一個字符盒子(character box)；但是圖片這樣的替換元素，其顯示內(nèi)容不是文字，因此內(nèi)容區(qū)域可以看成是元素自身。

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

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

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

width

width的默認(rèn)值是auto，但很多人卻都不理解這個值是什么意思，因為auto在不同場景會有不同的表現(xiàn)：

fill-available

fit-content

min-content

max-content

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

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

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

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

height

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

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

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

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

替換元素

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

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

，