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

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

盒子模型

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

內聯盒模型

內容區域(content area)

內聯盒子(inline box)

行框盒子(line box)

包含盒子(containing box)

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

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

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

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

width

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

fill-available

fit-content

min-content

max-content

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

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

min-content：收縮到最小。在表格中最常見，當每一列空間都不夠的時候，文字能斷則斷，中文隨便斷，英文單詞不能斷。可以根據這個特性實現凹凸圖形等效果，如下：

max-content：超出容器限制，內容很長的連續英文或數字，或者內聯元素被設置為了white-space: nowrap。

height

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

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

父元素設定顯式高度值

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

替換元素

由于替換元素在很多表現上都與普通內聯元素不一樣，因此在這里著重介紹一下替換元素。

根據“外在盒子”是內聯還是塊級，我們把元素分為內聯元素和塊級元素，而根據內容是否可替換，我們把元素分為可替換元素和非替換元素。

，