html盒子模型多个盒子 css如何使用不同盒子模型

css如何使用不同盒子模型

css使用不同盒子模型可以通过css属性box-sizing来设置，当它的值为content-box时，是标准的盒子模型；当它的值为border-box时，是IE盒子模型；当它的值是inherit时，继承自父元素的box-sizing属性的值。

box-sizing属性值

● content-box：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。

● border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去外边距、边框和内边距才能得到内容的宽度和高度。

● inherit：规定应从父元素继承box-sizing属性的值。

(相关课程推荐：css视频教程)

盒子模型知识扩展

一个盒子由外到内可以分成四个部分：margin(外边距)、border(边框)、padding(内边距)、content(内容)。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

盒子真正的宽和高按下面公式计算：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

为了显得专业一点，我们还可以用带属性的公式表示：

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

上面说到的是 默认 情况下的计算方法，另外一种情况下，width和height属性设置的就是盒子的宽度和高度。盒子的宽度和高度的计算方式由box-sizing属性控制。

本文来自css答疑栏目，欢迎学习！