css知識總結——盒子模型

什麼是盒子模型

當對一個文檔進行佈局的時候，瀏覽器的渲染引擎會將所有的元素表示成一個個的矩形盒子。CSS盒模型本質上就是一個盒子，封裝周圍的HTML元素。它包括四個部分: 邊距（margin）， 邊框（border），填充（padding），內容（content）。

下面的圖片說明了盒子模型（圖片來源於網絡，侵刪） ：

• Margin （外邊距）。邊框外的部分。用空白區域來擴充邊框外的部分。以分開相鄰的元素
• Border（邊框）。圍繞在內邊距和內容外的邊框
• Padding（內邊距）。 擴展自內容區域，填充元素中內容和邊框的部分
• Content（內容）。盒子即元素的內容。

盒模型分類

由於歷史原因，CSS的盒模型分爲兩類——W3C標準盒模型和IE盒模型。 這兩個盒模型最核心的區別就是在IE的盒子模型其content的部分包含了padding和border。而標準盒子模型content部分即爲content部分，不包含其他的部分。

標準盒子模型:

IE盒子模型：

元素的width和height屬性

當我們在設置元素的width和height屬性的時候，我們設置的是盒模型的content區域的大小。對應到盒模型上就是:

標準盒模型：

width = content的寬度
height = content的高度

IE盒模型：

width = border + padding + content的寬度
height = border + padding + content 的高度

CSS如何設置這兩種盒子模型

利用CSS的屬性box-sizing可以設置這兩個盒子模型

box-sizing: content-box; (標準盒子模型)
box-sizing: border-box; (IE盒子模型）