前端面试题库 一、什么是盒模型?【标准盒子模型和怪异盒子模型的区别?】
什么是盒子模型?
在我们HTML页面中,没一个元素都可以被看作一个盒子,而这个盒子由:内容区(content)、填充区(padding)、边框区(border)、外边界区(margin)四部分组成。
对于盒模型,分为标准盒模型和怪异盒模型两种。
标准(W3C)盒模型
在标准模式下,一个块的总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)
怪异盒模型(IE盒子模型)
在怪异模式下,一个块的总宽度 = 内容的width + margin(左右)(这里的width包含了padding(左右)和border(左右)的值)
两种模式的转换(通过box-sizing)
box-sizing
中比较常用的两个属性值为 content-box
和border-box
,它可以改变盒子模型的解析计算模式,可以参考上面的代码案例。
- 当设置
box-sizing:content-box
时,采用标准模式进行计算,默认就是这种模式 - 当设置
box-sizing:border-box
时,采用怪异模式进行计算