盒子的屬性

文檔的每個(gè)元素被構(gòu)造成文檔布局內(nèi)的一個(gè)矩形盒子，盒子每層的大小都可以使用一些特定的CSS屬性調(diào)整。相關(guān)屬性如下:

img

• width和height

  width和height設(shè)置內(nèi)容盒（content box）盒子的寬度和高度。內(nèi)容盒是盒子內(nèi)容顯示的區(qū)域 — 包括盒子內(nèi)的文本內(nèi)容，以及表示嵌套子元素的其它盒子。注意: 還有其他屬性可以更巧妙地處理內(nèi)容的大小 — 設(shè)置大小約束而不是絕對(duì)的大小。這些屬性包括min-width、max-width、min-height 和 max-height。

• padding

  padding表示一個(gè) CSS 盒子的內(nèi)邊距 — 這一層位于內(nèi)容盒的外邊緣與邊框的內(nèi)邊緣之間。該層的大小可以通過(guò)簡(jiǎn)寫(xiě)屬性padding 一次設(shè)置所有四個(gè)邊，或用 padding-top、padding-right、padding-bottom 和 padding-left 屬性一次設(shè)置一個(gè)邊。

• border

  CSS 盒的邊框（border）是一個(gè)很明顯的層，位于內(nèi)邊距的外邊緣以及外邊距的內(nèi)邊緣之間。邊框的默認(rèn)大小為 0 — 從而讓它不可見(jiàn) — 不過(guò)我們可以設(shè)置邊框的厚度、風(fēng)格和顏色讓它出現(xiàn)。 border 簡(jiǎn)寫(xiě)屬性可以讓我們一次設(shè)置所有四個(gè)邊，例如 border: 1px solid black。This can be broken down into numerous different longhand properties for more specific styling needs:

  border-top，border-right，border-bottom，border-left：設(shè)置厚度，款式和邊境一側(cè)的顏色。border-width，border-style，border-color：設(shè)置僅厚，樣式或顏色獨(dú)立，但邊界的所有四個(gè)側(cè)面。您還可以設(shè)置單獨(dú)的邊框的單面的三個(gè)屬性之一，使用border-top-width，border-top-style，border-top-color，等。

• margin

  外邊距（margin）代表 CSS 盒子周?chē)耐獠繀^(qū)域，在布局中推開(kāi)其它 CSS 盒子。其表現(xiàn)與與 padding 很相似；簡(jiǎn)寫(xiě)屬性為 margin，單個(gè)屬性分別為 margin-top、margin-right、margin-bottom和 margin-left。

更改默認(rèn)的盒模型

**box-sizing **屬性用于更改用于計(jì)算元素寬度和高度的默認(rèn)的 CSS 盒子模型?？梢允褂么藢傩詠?lái)模擬不正確支持CSS盒子模型規(guī)范的瀏覽器的行為。

值

• content-box

  默認(rèn)值，標(biāo)準(zhǔn)盒子模型。width和height只包括內(nèi)容的寬和高， 不包括邊框（border），內(nèi)邊距（padding），外邊距（margin）。

  **注意: 內(nèi)邊距, 邊框 & 外邊距 都在這個(gè)盒子的外部。 **

  比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在瀏覽器中的渲染的實(shí)際寬度將是370px;

  尺寸計(jì)算公式：width = 內(nèi)容的寬度，height = 內(nèi)容的高度。

• border-box

  width 和 height 屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距。

  這是當(dāng)文檔處于 Quirks模式 時(shí)Internet Explorer使用的盒模型。padding和border將屬于盒子的一部分

  例如, .box {width: 350px; border: 10px solid black;}導(dǎo)致在瀏覽器中呈現(xiàn)的寬度為350px的盒子。這個(gè)例子雖然沒(méi)有設(shè)置高度，但是因?yàn)樵O(shè)置了border，所以高度自動(dòng)就成了20px。

  尺寸計(jì)算公式：width = border + padding + 內(nèi)容的 width，height = border + padding + 內(nèi)容的 height*。

參考地址：
盒模型mdn
盒模型