對css中盒子模型的理解

html文件中的每乙個元素在頁面布局中都會被呈現為乙個盒子模型，如下圖所示：

width和height屬性用來設定內容區域的寬和高，height屬性在預設情況下和內容框的高度相同，也就是隨內容多少的變化而變化。

padding為盒子模型的內邊距寬度，也就是內容到邊界（border）直接的距離。

border屬性是用於設定邊界的寬度（border-width），樣式（border-style），顏色（border-color），但是在定義寬度的時候會忽略以百分比作為單位的情況

margin屬性設定了盒子外部區域的寬度，這個屬性推開了頁面布局中其他的盒子。margin屬性的值可以為負，表示這個元素的邊界會向內凹，如果margin的值為正值，那麼表示這個塊級元素的邊界向上下左右某個方向拉伸。

margin為正值的情況下的兩個box

margin為負值的情況下兩個box位置的變化

可以看出當把margin設定成負值後，box2的位置向上和向左發現5px的移動，是因為margin不再包裹在border外面，而是向內凹陷，根據外邊距合併的原則，合併後的外邊距為0，所以兩個box的上下邊距之間沒有距離。

注意：如果使用百分比設定內外邊距，例如設定margin：5%，這個5%是以當前元素的父元素為基準來計算的。

margin屬性有乙個特別的行為，就是外邊距合併，這個行為只對普通文件流中的塊級元素的垂直外邊距有效，行內框（inline-block），浮動元素和絕對定位的原素不會發生外邊距合併。

發生外邊距合併的三種基本情況：

1.兩個或多個垂直毗鄰的兄弟元素，上面元素的下邊距會與下面元素的上邊距發生合併，合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

(引用自w3cschool)

2.父元素和子元素之間，具體可分為兩種情況：

3.空元素，如果乙個塊級元素中不包含任何內容，並且在其 margin-top 與 margin-bottom 之間沒有邊框、內邊距，這種情況下這個元素自身的上下邊距會發生合併。

(引用自w3cschool)

注意：

在預設情況下，width屬性設定的是元素內容的寬度，而任何乙個被繪製到螢幕上的元素的盒子寬度和高度都需要加上border和padding的值，所以當你調整乙個元素寬度和高度的時候都需要考慮到border和padding的值，box-sizing可以用來調整這個問題：

當我們給乙個元素設定background-color和background-imge時，這個背景會覆蓋到元素border的外邊界，background-clip屬性可以用來調整背景所覆蓋的區域，一共有四個值：

border-box:背景延伸到邊框外，預設值

padding-box：背景延伸到內邊距外，但是不會繪製到border。

content-box：背景被裁剪至內容區（content box）外沿。

text ：背景被裁剪成文字的背景色。

使用text時要注意字型顏色需要設定成透明和瀏覽器相容問題。