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

选择合适的盒模型类型取决于您的布局需求以及设计偏好。