在昨天的文章——【青训营】做面试题般回顾前端基础知识CSS篇 – 2 CSS盒模型那些有趣的知识点中

我聊到了两个盒模型很有趣的点 今天再对这两个内容进行一个深入地研究（偶然看到了两道相关的面试题~）

【1】标准盒模型的问题

• W3C标准盒模型

盒模型 = margin + border + padding + width（盒模型中的块元素总宽度 = content）

• IE盒模型

盒模型 = margin + width（盒模型中块元素总宽度 = border + padding + content）

【2】CSS3中box-sizing属性

这个box-sizing属性是CSS3中新增的属性，它的用处非常有意思 但是这就跟面试题啥的没关系了 我打算单独写一篇文章 通过实操的方法了解这个有趣的属性

可以看下这篇文章 写得相当不错

那么本篇文章我们来把第一个点研究清楚咯

1.两道有点文字游戏的面试题

【1】“块元素的总宽度” “盒模型的总宽度”

标准盒模型中的块元素总宽度是多少啊~

有图有真相——

【题目来自牛客网】

答案：

标准盒模型中——

• 块元素的宽度为 content！

• 而盒模型的总宽度为D选项 也就是 content + 2*(padding+border+margin)

上图加深印象——

W3C标准盒模型

而IE盒模型我们而需要了解

因为下一题它就出现了！

【2】标准盒子/IE盒子模型的总宽度

先说答案：

• 标准盒子的总宽度为 左右margin + 左右border + 左右padding + width（标准盒模型的width 也就是content-块元素的宽度）

• IE盒子的总宽度为 左右margin + width（IE盒模型的width 也就是左右border + 左右padding + content）

这里就跟上面的内容联系起来了！（看上面的图就知道了）