如何理解css盒模型？

标准盒模型

通过上图我们可以看到标准盒模型的范围包括：content、padding、border、margin，并且content部分不包含其他部分。

ie盒模型

ie盒模型也是包括content、padding、border、margin，和标准盒模型不同的是：ie盒模型大的content部分包含了padding和border部分

box-sizing

box-sizing的语法：

box-sizing:content-box || border-box || inherit;

• 当设置box-sizing:content-box;时，将采用标准模式解析计算，也是默认模式；

• 当设置box-sizing:border-box;时，将采用怪异模式解析计算。

所以将标准盒模型转为ie盒模型的时候可以给元素添加box-sizing:border-box;属性来解决。

以上就是如何理解css盒模型？的详细内容，更多请关注0133技术站其它相关文章！