介绍一下标准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包含进元素的尺寸中，这样就不会存在撑破父层元素的情况了。
原文地址：https://www.cnblogs.com/dhpong/p/10505069.html
时间： 2024-10-09 11:43:09