簡介

在HTML中，有一個很重要的理論：塊元素和行內元素。在CSS中極其重要的一個理論——CSS盒子模型。 在“CSS盒子模型”理論中，頁面中的所有元素都可以看成一個盒子，并且占據著一定的頁面空間。

一個頁面由很多盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨一個盒子的內部結構（往往是padding），二是理解多個盒子之間的相互關系（往往是margin）。

2 盒子模型概念

盒模型指的是網頁元素的結構。當指定一個元素的寬度或高度時，便設置了元素內容的尺寸，可以把每個元素都看成一個盒子，盒子模型是由4個屬性組成，號稱“盒尺寸四大家族”：

• content（內容區），可以是文本或圖片 —— 變化多端
• padding（內邊距），用于定義內容與邊框之間的距離 —— 溫和向內
• margin（外邊距），用于定義當前元素與其它元素之間的距離 —— 激進對外
• border（邊框），用于定義元素的邊框 —— 功勛卓越

此外，在盒子模型中，還有寬度（width）和高度（height）兩大輔助性屬性。記住，所有的元素都可以看成一個盒子 。如下圖所示：

2.1 內容區

內容區是CSS盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型。內容區是盒子模型必備的組成部分，其他3個部分都是可選的。 內容區有3個屬性：width、height和overflow。使用width和height屬性可以指定盒子內容區的高度和寬度。在這里注意一點，width和height這兩個屬性是針對內容區content而言的，并不包括padding部分。 當內容過多，超出width和height時，可以使用overflow屬性來指定溢出處理方式。

2.2 內邊距

內邊距，指的是內容區和邊框之間的空間，可以看成是內容區的背景區域。padding屬性接受長度值或百分比值，但不允許使用負值。 關于內邊距的屬性有5種：padding-top、padding-bottom、padding-left、padding-right，以及綜合了以上4個方向的簡寫內邊距屬性padding。使用這5種屬性可以指定內容區與各方向邊框之間的距離。

2.2.1 元素的尺寸

因為CSS中默認的box-sizing是content-box，所以使用padding會增加元素的尺寸。

.box {
　  width: 80px;　  
    padding: 20px;
}

如果不考慮其他CSS干擾，此時.box元素所占據的寬度就應該是120像素（80px+20px×2），這其實是不符合現實世界的認知的，人們總是習慣把代碼世界和現實世界做映射，因此，新人難免會在padding的尺寸問題上踩到點坑。這也導致很多人樂此不疲地設置box-sizing 為border-box，甚至全局設置。

2.2.2 標簽元素內置的padding

• ol/ul列表內置padding-left，但是單位是px不是em。
• 很多表單元素都內置padding。例如：所有瀏覽器<input>/<textarea>輸入框內置padding；所有瀏覽器<button>按鈕內置padding；所有瀏覽器<radio>/<chexkbox>單復選框無內置padding。

2.3 外邊距

外邊距，指的是兩個盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。外邊距使得元素之間不必緊湊地連接在一起，是CSS布局的一個重要手段。 外邊距的屬性也有5種：margin-top、margin-bottom、margin-left、margin-right，以及綜合了以上4個方向的簡寫外邊距屬性margin。 同時，CSS允許給外邊距屬性指定負數值，當外邊距為負值時，整個盒子將向指定負值的相反方向移動，以此產生盒子的重疊效果，這就是傳說中的“負margin技術”。

2.3.1 margin與元素尺寸

• 元素的內部尺寸

只有元素是“充分利用可用空間”狀態的時候，margin才可以改變元素的可視尺寸。比方說，如下CSS：

.header {
　width: 160px;　
  margin: 0 -5px;
}

此時元素寬度還是160像素，尺寸無變化。因為只要寬度設定，margin就無法改變元素尺寸，這和padding是不一樣的。

但是，如果是下面這樣的HTML和CSS：

<div class="header">
　  <div class="son">
</div></div>
.header { width: 160px; }
.menu {　margin: 0 -5px; }

則.menu元素的寬度就是165像素了，尺寸通過負值設置變大了，因為此時的寬度表現是“充分利用可用空間”。

• 元素的外部尺寸

只要元素具有塊狀特性，無論有沒有設置width/height，無論是水平方向還是垂直方向，即使發生了margin合并，margin對外部尺寸都著著實實發生了影響。

2.3.2 margin合并

塊級元素的上外邊距（margin-top）與下外邊距（margin-bottom）有時會合并為單個外邊距，這樣的現象稱為“margin合并”。

• margin合并一般出現在以下3種場景：（1）相鄰兄弟元素margin合并。這是margin合并中最常見、最基本的。（2）父級和第一個/最后一個子元素。（3）空塊級元素的margin合并。
• margin合并的計算規則把margin合并的計算規則總結為：“正正取大值”， “正負值相加” ，“負負最負值”。
• margin合并的意義對于兄弟元素的margin合并其作用和em類似，都是讓圖文信息的排版更加舒服自然。父子margin合并的意義在于：在頁面中任何地方嵌套或直接放入任何裸<div>，都不會影響原來的塊狀布局。<div>是網頁布局中非常常用的一個元素，其語義是沒有語義，也就是不代表任何特定類型的內容，是一個通用型的具有流體特性的容器，可以用來分組或分隔。由于其作用就是分組的，因此，從行為表現上來看，一個純粹的<div>元素是不能夠也不可以影響原先的布局的。自身margin合并的意義在于可以避免不小心遺落或者生成的空標簽影響排版和布局。

2.3.3 margin:auto

margin:auto的填充規則如下。 （1）如果一側定值，一側auto，則auto為剩余空間大小。 （2）如果兩側均是auto，則平分剩余空間。

2.4 邊框

在CSS盒子模型中，邊框與我們之前學過的邊框是一樣的。 邊框屬性有border-width、border-style、border-color，以及綜合了3類屬性的簡寫邊框屬性border。

border屬性總是能解決很多棘手的問題，在在圖形構建、體驗優化以及網頁布局這塊幾大放異彩，，同時保證其良好的兼容性和穩定性。下面我們一起看看border都有哪些精彩的特性表現。

2.4.1 為什么border-width不支持百分比值

我們通過比對筆記本、手機發現，雖然兩臺設備的尺寸差異很大，但是邊框的大小相比而言就可以忽略不計了。邊框是不會因為設備大就按比例變大的。因此，如果支持百分比值，是不是就意味著設備大了邊框也跟著變大？有一張圖片，大片區域都是白色的，在白底背景上和文字混在一起，就會有一片奇怪的空白區域，會讓人產生沒對齊的假象，此時，我們給這張圖片套個1px灰色邊框，區域就明顯了，對吧！設計的初衷就是為了這么點兒事，沒有需要使用百分比值的場景。于是，綜合這兩點，造成了border-width不支持百分比值。

2.4.2 border與圖形構建

border屬性可以輕松實現兼容性非常好的三角圖形效果，為什么可以呢？其底層原因受inset/outset 等看上去沒有實用價值的border-style屬性影響，邊框3D效果在互聯網早期其實還是挺潮的，那個時候人們喜歡有質感的東西，為了呈現逼真的3D效果，自然在邊框轉角的地方一定要等分平滑處理，然后不同的方向賦予不同的顏色。然后，這一轉角規則也被solid類型的邊框給沿用了。因此，我們就不難理解下面的4色邊框的表現了：

div {
　  width: 10px; height: 10px; 　  
    border: 10px solid; 　  
    border-color: #f30 #00f #396 #0f0;
}

運行一下上面的代碼看一下效果吧！

2.4.3 border與透明邊框技巧

這是提高用戶體驗的一個小技巧，尤其在移動端，我們的操作工具一般就是我們的手指，但是，我們的手指粗細可以媲美胡蘿卜，而屏幕尺寸就那么點兒，如果我們正在走路，則一些精致的圖標和按鈕很容易就點不中甚至誤點。

穩妥的方法是外部再嵌套一層標簽，專門控制點擊區域大小。如果對代碼要求較高，則可以使用padding或者透明border增加元素的點擊區域大小。

3 總結

現實生活中看到的盒子，有正方形、長方形、圓柱形等，依據形狀特點，可包裹不同物件。CSS中的盒子雖然沒有那么多的形狀，但在視覺呈現上不同類型的盒子還是會有很大的不同，有的盒子要占據一行，有的盒子不能定義外邊距、寬度和高度，有的盒子寬度和高度能自適應。CSS中用display指定盒類型（即框類型），常用的有 block（塊）、inline（行內）、inline-block（行內塊）、table（表格），以及CSS3新增的flexbox（伸縮盒）。 HTML 元素只有兩種默認的盒類型，即塊級元素（block-level element）和行內元素（inline-level element）。其中行內元素不可定義CSS屬性width、height、上下margin和上下padding。常用的span和div分別是行內元素和塊級元素。

由此可見，需要掌握的內容太多，要想學會所有布局相關的技術不太現實。高級的布局話題基于文檔流和盒模型等概念，這些是決定網頁元素的大小和位置的基本規則。因此理解和掌握如何設置元素的大小和位置至關重要。

4 最后的最后

為初學者提供學習指南，為從業者提供參考價值。我堅信碼農也具有產生洞見的能力。關注【碼農洞見】，一起學習和交流吧！

margin:auto | length

 border：border-style | border-color | border-width；

 padding：length