CSS盒模型

盒模型

盒模型由内容 (content)、内边距(padding)、边框(border)、外边距(margin) 组成，其有两种标准：标准模型和 IE 模型。

由上图对比可看出区别在于元素的 box-sizing 的默认值不同：

1. 标准模型：默认 box-sizing: content-box。定义宽（width）高 (height) 等于盒子内容（content）的宽高。
2. IE 模型：默认 box-sizing: border-box. 定义的宽（width）高 (height) 等于内容 (content)+ 内边距(padding)+ 边框(border) 的总宽高