扯點：Box Modal - 盒模型

在文檔中，元素被表示爲一個矩形的盒子。

在CSS中，使用盒模型描述這些矩形盒子中的每個。這個模型描述了元素所佔空間的內容。每一個盒子有四個邊：外邊距邊(margin), 邊框邊(border), 內填充邊(padding)與內容邊(content)。

計算元素寬高

box-sizing 決定元素寬度和高度如何計算

box-sizing支持的屬性

content-box | border-box

值	描述
content-box	寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框。
border-box	爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製

padding

值	描述
auto	瀏覽器計算內邊距。
length	規定以具體單位計的內邊距值，好比像素、釐米等。默認值是 0px。但不容許使用負值。
%	規定基於父元素的寬度的百分比的內邊距。

實際測試padding的百分比，測試結果並非等於，而是近似等於。瀏覽器計算會存在誤差，

border

1. border繪製在「元素的背景之上」,換句話來講，元素的背景是內容、內邊距和邊框區的背景。
2. border默認樣式border-style:none;
3. 默認顏色border-color: 元素文本顏色。利用這個特性，解決邊框和文本顏色須要保持的設計要求。
4. 實現透明邊框 border-color:transparent;

margin

值	描述
auto	瀏覽器計算外邊距。
length	規定以具體單位計的外邊距值，好比像素、釐米等。
%	規定基於父元素的寬度的百分比的外邊距

margin: auto計算規則

設置margin: auto後，

1. 行內元素，行內塊級元素margin取值0；

2. 塊級元素，在文檔流中

   • margin-bottom和margin-top取值0；

   • margin-left和margin-right取值相同，按照下面公式計算

     'margin-left' + 'border' + 'padding' + 'width' + 'margin-right' = width of containing block

3. 塊級元素，不在文檔流中

   • margin-left和margin-right取值相同，按照下面公式計算

     'margin-left' + 'border' + 'padding' + 'width' + 'margin-right' = width of containing block

   • margin-top和margin-bottom取值相同，按照下面公式計算

     'margin-top' + 'border' + 'padding' + 'height' + 'margin-bottom' = height of containing block

margin collapsing(外邊距塌陷、外邊距合併)

1. 在同一個文檔流中，同一個BFC內，兩個相鄰塊級元素的垂直方向上外邊距（margin-top/margin-bottom）會合並
2. 當兩個元素屬於不一樣的BFC時，這兩個元素的外邊距不會合並。

發生外邊距塌陷的三種基本狀況

1. 相鄰的兄弟姐妹元素
2. 塊級父元素與其第一個/最後一個子元素
3. 空塊塊級元素