css盒模型有哪些

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

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

1、標(biāo)準盒模型（content-box）：

寬度（width）和高度（height）只包括內(nèi)容區(qū)域（content）的尺寸。

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

元素的總寬度 = 內(nèi)容寬度 + 左內(nèi)邊距 + 右內(nèi)邊距 + 左邊框 + 右邊框 + 左外邊距 + 右外邊距

元素的總高度 = 內(nèi)容高度 + 上內(nèi)邊距 + 下內(nèi)邊距 + 上邊框 + 下邊框 + 上外邊距 + 下外邊距

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

寬度（width）和高度（height）包括了內(nèi)容區(qū)域（content）、內(nèi)邊距（padding）和邊框（border）的尺寸。

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

元素的總寬度 = 內(nèi)容寬度 + 左內(nèi)邊距 + 右內(nèi)邊距 + 左邊框 + 右邊框

元素的總高度 = 內(nèi)容高度 + 上內(nèi)邊距 + 下內(nèi)邊距 + 上邊框 + 下邊框

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

例如，使用標(biāo)準盒模型：

.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;}

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