css盒子有几种模型

在CSS中，盒子模型用于描述HTML元素的布局和样式。盒子模型定义了元素的内容区、内边距、边框和外边距。CSS有两种盒子模型，分别是标准盒子模型和IE盒子模型。

/* 标准盒子模型 */
box-sizing: content-box;
/* IE盒子模型 */
box-sizing: border-box;
 

标准盒子模型（content-box）：元素的宽度和高度只包括内容（content），不包括内边距（padding）、边框（border）和外边距（margin）。这意味着，如果指定一个元素的宽度和高度，那么这个元素的总体积就会比指定值大，因为内边距、边框和外边距都需要空间。

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
  /* 标准盒子模型 */
  box-sizing: content-box;
}
 

如上代码的示例，元素的宽度为200px（不包括padding、border和margin），因此元素的内容区宽度为160px（200-20*2-2*2）。

IE盒子模型（border-box）：元素的宽度和高度包括内容、内边距和边框，但不包括外边距。这意味着，当指定一个元素的宽度和高度时，这个元素的总体积就是指定的值，不会额外增加因为边框和内边距所需的空间。

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
  /* IE盒子模型 */
  box-sizing: border-box;
}
 

如上代码的示例，元素的宽度为200px（包括padding、border但不包括margin），因此元素的内容区宽度为156px（200-20*2-2*2）。

通过了解CSS的盒子模型，我们可以更好地控制元素的布局和样式，提升网页的设计和开发效率。