1 盒模型

⚡ 30 秒速记

• 由内到外四层：content → padding → border → margin
• content-box（默认）：width 只管内容区，padding 和 border 往外撑
• border-box：width 包含 padding 和 border，写多少就是多宽，和设计稿标注对得上
• 两种模式都不含 margin，这是最常被答错的一点
• 项目里一般全局 html { box-sizing: border-box } + *, *::before, *::after { box-sizing: inherit }，第三方组件要例外时在它根节点改回去就行

盒模型就是 content、padding、border、margin 四层，两种模式的区别只在 width 量的是哪一层。 默认的 content-box 里 width 只算内容区，加了内边距和边框盒子会变大；border-box 的 width 已经把 padding 和 border 算进去了，写 240px 外框就是 240px。我做项目基本都是全局设 border-box，用 inherit 的写法，这样某个第三方组件要用 content-box 时在根节点改一处就行。另外 margin 两种模式都不算，它永远在盒子外面。

• 有两种， 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 属性的值