【html】 W3C盒模型和怪异盒模型

前言

【目的】

• 通过总结小伙伴们面试涉及到的问题，来进行前端知识的查漏补缺
• 给准备面试的小伙伴总结知识，也帮助自己更深入的了解前端知识。

【内容】

• 首先将介绍相关内容
• 然后列出常见的面试题型。

【温馨提示】

• 笔记中有些个人理解后整理的笔记，可能有所偏差，也恳请读者帮忙指出，谢谢。

---

知识介绍

啥是W3C盒模型？

• 又称标准盒模型
• box-sizing:content-box（意味着content包含在width里）

• 盒子总宽=左右margin+左右border+左右padding+width
  • width=content
• 盒子总高=上下margin+上下border+上下padding+height

啥是怪异盒模型？

• 又称IE盒模型
• box-sizing:border-box（意味着border和padding包含在width里）

• 盒子总宽=左右margin+width
  • width=左右border+左右padding+content
• 盒子总高=左右margin+height
  • height=上下border+上下padding+content

面试常见题目

考察点1：计算盒子总宽、总高。

【相关题目链接】

以下的选项，正确的盒子宽高计算公式是（）

关于盒子宽度下列正确的是（）

如何计算一个盒子的真实宽度？

当前盒子高度100px，文字大小20px，文字上边距是20px，此时文字行高是多少（）

以下关于盒子模型描述正确的是：

…

考察点2：盒子模型控件了解

【相关题目链接】

以下描述中，哪些是盒子模型的组件（）

以下选项中，哪个属性是控制盒子之间的距离的（）

…

考察点3：对盒子模型样式的应用

【相关题目链接】

盒模型 - border-box

盒模型 - content-box

…

结语

【感谢】

感谢程序员鱼皮提供面试鸭平台!!!

感谢各位读者能看到最后!!!