CSS中的两种盒模型总结

CSS3中的盒模型有两种：标准盒子模型和IE盒子模型

在这里插入图片描述

在这里插入图片描述

盒模型都是由四个部分组成的，分别是margin、border、padding和content

标准盒模型与IE盒模型的区别在于设置width和height时，所对应的范围不同。

• 标准盒模型的width和height属性的范围只包含了content
• IE盒模型的width和height属性的范围包含了border、padding和content

可以通过修改元素的box-sizing属性来改变元素的盒模型：

• box-sizing:content-box 表示标准盒模型
• box-sizing:border-box 表示IE盒模型