盒模型是浏览器布局的基础,它由以下几部分组成:
常见的盒模型有 IE 盒模型和标准盒模型,它们的区别在于宽高的计算方式不同。
IE 盒模型的宽高由元素的 content、padding 和 border 共同决定,而标准盒模型的宽高只由元素的 content 决定:
盒模型的计算规则决定了元素的尺寸,盒模型计算方式的不统一会导致不同浏览器渲染结果不同(怪异模式)。由于浏览器的盒模型计算规则不统一,使得网页开发者们不得不针对不同浏览器编写不同的样式, box-sizing
的出现则化解了这种尴尬。
box-sizing
是 CSS3 才出现的用于设置浏览器采用哪种盒模型规则的属性:
box-sizing
有以下几个属性:
content-box
和 border-box
前面已说明,padding-box
表示元素的尺寸由 content、padding 决定,
需要注意的是 Firefox 50 版本以上已不支持 padding-box
,请谨慎使用:
提到 IE 容易想到落伍,但其实 IE 盒模型更受欢迎,因为 IE 盒模型对于开发者更直观: