这篇适合面试前做一次快速盘点。先按应聘岗位挑最可能被问的主题，每道题只看标题，试着在一分钟内说出结论和一个实际例子；说不顺的再读正文。时间有限时优先补自己的薄弱项，别为了“刷完”把已经会的题再看一遍。

1 CSS

盒模型

⚡ 30 秒速记

• 四层由内到外：content → padding → border → margin
• content-box（默认）：width 只算内容；border-box：width 包含 padding 和 border
• margin 永远不算进 width，元素在布局里的占位要再加上它
• 工程惯例：*, *::before, *::after { box-sizing: border-box }，写多宽就是多宽
• 「IE 盒模型」指老 IE 怪异模式（没写 DOCTYPE），表现等同 border-box

盒模型就是一个元素由内到外的四层：内容、内边距、边框、外边距，两种模型的区别只在于 width 算到哪一层。 默认的 content-box，width 只管内容，你写 width: 200px; padding: 20px; border: 1px，实际占 242px；border-box 下写 200px 就是 200px，内边距和边框从里面扣。所以现在基本都全局设 border-box，加内边距不会把布局撑破。至于常说的 IE 盒模型，就是老 IE 在怪异模式下的算法，和今天的 border-box 一样。

.a { box-sizing: content-box; width: 200px; padding: 20px; border: 1px solid; } /* 占 242px */
.b { box-sizing: border-box;  width: 200px; padding: 20px; border: 1px solid; } /* 占 200px，内容区 158px */

• 有两种， 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进行设置