盒模型是浏览器布局的基础,它由以下几部分组成:

常见的盒模型有 IE 盒模型和标准盒模型,它们的区别在于宽高的计算方式不同。

IE 盒模型的宽高由元素的 content、padding 和 border 共同决定,而标准盒模型的宽高只由元素的 content 决定:

盒模型的计算规则决定了元素的尺寸,盒模型计算方式的不统一会导致不同浏览器渲染结果不同(怪异模式)。由于浏览器的盒模型计算规则不统一,使得网页开发者们不得不针对不同浏览器编写不同的样式, box-sizing 的出现则化解了这种尴尬。

box-sizing

box-sizing 是 CSS3 才出现的用于设置浏览器采用哪种盒模型规则的属性:

box-sizing 有以下几个属性:

content-boxborder-box 前面已说明,padding-box 表示元素的尺寸由 content、padding 决定, 需要注意的是 Firefox 50 版本以上已不支持 padding-box,请谨慎使用:

提到 IE 容易想到落伍,但其实 IE 盒模型更受欢迎,因为 IE 盒模型对于开发者更直观: