1 盒模型

⚡ 30 秒速记

• 一个盒子由内到外是 content → padding → border → margin 四层
• content-box（默认）的 width 只算内容区，padding 和 border 往外加
• border-box 的 width 含 padding 和 border，量出来就是设计稿标注的值
• 重置样式里几乎都会全局设 border-box，写法用 inherit 更好留例外口子
• margin 永远在盒子外面，两种模式都不含它 —— 这是最常被答错的一点

盒模型由内到外分为 content、padding、border 和 margin 四层。 默认的 content-box 中，width 和 height 只表示内容区，内边距和边框会继续把盒子撑大。设置 box-sizing: border-box 后，声明的宽高会包含 padding 与 border，因此更方便按设计稿控制尺寸。两种模型都不包含 margin，它始终属于盒子外部；需要统一项目行为时，可以全局设置并通过 inherit 保留调整空间。

• 有两种， IE盒子模型、W3C盒子模型；
• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
• 区 别： IE的content部分把 border 和 padding计算了进去;

标准盒子模型的模型图

从上图可以看到：

• 盒子总宽度 = width + padding + border + margin;
• 盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border 值

IE 怪异盒子模型

从上图可以看到：

• 盒子总宽度 = width + margin;
• 盒子总高度 = height + margin;

也就是，width/height 包含了 padding 和 border值

页面渲染时，dom 元素所采用的 布局模型。可通过box-sizing进行设置

通过 box-sizing 来改变元素的盒模型

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

• box-sizing: content-box; 默认的标准(W3C)盒模型元素效果，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
• box-sizing: border-box; 触发怪异(IE)盒模型元素的效果，元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
• box-sizing: inherit; 继承父元素 box-sizing 属性的值

小结

• 盒子模型构成：内容(content)、内填充(padding)、 边框(border)、外边距(margin)
• IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
• 标准(W3C)盒模型：元素宽度 = width + padding + border + margin
• 怪异(IE)盒模型：元素宽度 = width + margin
• 标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高