css的盒模型有几种-猿码集

盒模型介绍

盒模型是CSS中一个重要的概念，它是CSS布局的基础，用于描述一个元素在页面中的大小和位置。盒模型可以看做是一个矩形框，它包括四个部分：内容区域、内边距、边框和外边距。CSS盒模型有两种表示方式：W3C盒模型和IE盒模型。

W3C盒模型是最常用的盒模型，它的内容区域（content）不包括边框（border）和内边距（padding），即元素的宽度和高度仅包括内容区域的大小。如下图所示：

上图中的盒子宽度为400px，高度为200px，内容区域的宽度为300px，高度为100px，边框为2px，内边距为50px，外边距为0。样式代码如下：


div {
  width: 400px;
  height: 200px;
  padding: 50px;
  border: 2px solid #000;
  margin: 0;
}

在W3C盒模型中修改content的宽高可用width和height属性，示例代码如下所示：


div {
  width: 300px;
  height: 100px;
}

这时元素的总宽度为400px，高度为200px，因为边框和内边距的值不会改变，只有内容区域改变。

IE盒模型内容区域包括边框和内边距，与W3C盒模型不同。如下图所示：

上图中盒子的宽度和高度与W3C盒模型相同，但内容区域的宽度和高度为250px和50px。样式代码如下：


div {
  width: 400px;
  height: 200px;
  padding: 50px;
  border: 2px solid #000;
  margin: 0;
  box-sizing: border-box;
}

在IE盒模型中修改内容区域宽高需使用box-sizing属性，设置为border-box，示例代码如下：


div {
  width: 300px;
  height: 100px;
  box-sizing: border-box;
}

这时元素的总宽度和高度会随着内容区域的改变而改变，边框和内边距不变。

选择W3C盒模型还是IE盒模型存在争议，但大多数浏览器都采用了W3C盒模型。在某些特殊需要下，可能需要使用IE盒模型解决问题，但要注意浏览器的兼容性问题。

在CSS3中，可以使用box-sizing属性指定使用哪种盒模型。如果要使用W3C盒模型，box-sizing属性的值应设为content-box；如果要使用IE盒模型，属性值应设为border-box。


div {
  box-sizing: content-box; /* 使用W3C盒模型 */
  box-sizing: border-box; /* 使用IE盒模型 */
}

了解CSS盒模型是每一个前端工程师基本的技能之一。本文介绍了盒模型的两种方式——W3C盒模型和IE盒模型，并分别使用样式代码实现了它们在页面上的表现形式。同时，还介绍了如何根据需要选择盒模型以及在CSS3中如何指定盒模型，希望本文对大家有所帮助。