css盒模型有哪些

CSS盒模型是一種用于描述網頁元素在布局中占據空間的概念。在網頁設計中，每個HTML元素都被看作是一個矩形的盒子，這個盒子包含了內容、內邊距（padding）、邊框（border）和外邊距（margin）。這些組成部分共同決定了一個元素在頁面上所占據的空間以及與其他元素之間的關系

CSS盒模型有兩種主要的類型，標準盒模型（content-box）和IE盒模型（border-box）。這兩種模型描述了元素的尺寸和邊界是如何計算的。

1、標準盒模型（content-box）：

寬度（width）和高度（height）只包括內容區域（content）的尺寸。

內邊距（padding）、邊框（border）和外邊距（margin）都會在計算元素的總尺寸時額外增加。

元素的總寬度 = 內容寬度 + 左內邊距 + 右內邊距 + 左邊框 + 右邊框 + 左外邊距 + 右外邊距

元素的總高度 = 內容高度 + 上內邊距 + 下內邊距 + 上邊框 + 下邊框 + 上外邊距 + 下外邊距

2、IE盒模型（border-box）：

寬度（width）和高度（height）包括了內容區域（content）、內邊距（padding）和邊框（border）的尺寸。

外邊距（margin）不會影響元素的尺寸。

元素的總寬度 = 內容寬度 + 左內邊距 + 右內邊距 + 左邊框 + 右邊框

元素的總高度 = 內容高度 + 上內邊距 + 下內邊距 + 上邊框 + 下邊框

通過CSS屬性box-sizing可以控制使用哪種盒模型類型。默認情況下，大多數瀏覽器使用標準盒模型（content-box）。如果想要使用IE盒模型，可以將元素的box-sizing屬性設置為border-box。

例如，使用標準盒模型：

.box {  width: 200px;  height: 100px;  padding: 10px;  border: 1px solid black;  margin: 20px;  box-sizing: content-box;}

使用IE盒模型：

.box {  width: 200px;  height: 100px;  padding: 10px;  border: 1px solid black;  margin: 20px;  box-sizing: border-box;}

選擇合適的盒模型類型取決于您的布局需求以及設計偏好。