对css盒模型的理解

Posted 2021-11-22 dhpong

介绍一下标准css的盒子模型？低版本IE的盒子模型有什么不同的？

1、有两种：IE盒子模型（怪异模式）、W3c盒子模型（标准模式）。

2、盒模型组成：内容(content)、填充(padding)、边界(margin)、边框(border)。
3、区别：IE的content部分把border和padding计算了进去

应用场景：

（1）表单：
表单中有一些input元素其实还是展现的是传统IE盒模型，带有一些默认的样式，而且在不同平台或者浏览器下的表现不一，造成了表单展现的差异。此时我们可以通过box-sizing属性来构建一个风格统一的表单元素。

（2）设置子类元素的margin或者border时，可能会撑破父层元素的尺寸，这时我就需要使用box-sizing: border-box来将border包含进元素的尺寸中，这样就不会存在撑破父层元素的情况了。