标签：box W3C 盒子 模型 content width html border

前言

【目的】

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

【内容】

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

【温馨提示】

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

---

知识介绍

啥是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

.......

结语

【感谢】

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

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

标签：box,W3C,盒子,模型,content,width,html,border
来源： https://www.cnblogs.com/lao-jiaweijarvee/p/16341282.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。