牛客前端宝典——刷题 ##Day5(1)

题目内容大部分是对盒模型的讲解，所以本题考查的是对盒模型的知识，如果你对盒模型还不太熟悉的话推荐看一下我对盒模型讲解的文章：盒模型 ，那么现在开始解题吧。

描述二：盒模型 - border-box

---

默认盒模型的width和height只会作用于盒子的内容区，而通过"box-sizing"属性可以改变计算盒子大小的方式。“box-sizing"的默认值为"content-box”，即上一题看到的那样，把值只作用于内容区。现在给类名为"border-box"的盒子设置"box-sizing"属性为"border-box"，此时width和height的值不仅会作用于内容区，并且还会包括内边距和边框。

很多人将"border-box"称为怪异盒模型，其实并不怪异。因为现实中的盒子就是这样测量的。比如快递盒，当用安全气囊包裹易碎物品时，填充物就可以视为"padding"，无论填充物有多厚，也不会影响盒子的整体大小。

现在再给类名为"border-box"的盒子设置宽度、高度都为"100px"、内边距为"5px"、边框为"5px solid black"，此时通过调试工具会发现盒子的实际大小并没有因为添加了内边距或边框而被撑大。"border-box"在布局中可以让开发者减少不必要的烦恼，如添加内边距、边框之后盒子大小发生变化影响到整体布局的效果。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

题目承接盒模型，继续对盒模型知识的加深理解，那么现在开始解题吧。

描述三：盒模型 - 外边距折叠

---

常规块盒子有一种机制叫外边距折叠，即垂直方向上的两个外边距相遇时，会折叠成一个外边距，且折叠之后的外边距高度为两者之中较大的那一个。现在给类名为"top"、“bottom"两个盒子都设置宽度、高度且都为"100px”、都设置外边距且都为"10px"，可以添加任意颜色便于区分两个盒子。此时通过调试工具可以发现两个盒子之间的距离为"10px"，并不是"20px"，说明已经发生了外边距折叠。

外边距折叠好像很奇怪，实际上却很有用。当一个页面包含了多个段落，如果没有外边距折叠，从第二个段落开始，所有段落的间距都是最上方段落的上外边距的两倍，有了外边距折叠，段落间距才会相等。

如果想要清除两个盒子之间的外边距折叠，可以给目标盒子设置以下属性：

1. display: inline-block

2. float属性值不是"none"的元素

3. 绝对定位

现在给类名为"bottom"的盒子设置"position"属性为"absolute"，可以看到下方的盒子向下移动了，此时外边距折叠失效。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

题目承接盒模型，继续对盒模型知识的加深理解，那么现在开始解题吧。

描述四：浮动

---

浮动盒子可以向左、右移动，直到它的外边沿接触父级的外边沿或另一个浮动盒子的外边沿。浮动盒子会脱离常规文档流，所以文档流中的元素几乎认为浮动盒子不存在。

现在给"body"标签设置宽度为300px，再给类名为"left"、“center”、"right"的盒子（左、中、右盒子）皆设置宽度、高度且都为100px，三个盒子的颜色可以自定义以便于观测。继续给中间盒子设置"float: left"属性，此时中间盒子已经是一个浮动盒子，不再占据流中的位置空间，右盒子上升到了浮动盒子的区域并且被浮动盒子覆盖住了。现在再给左、右盒子皆设置"float: left"属性，此时三个盒子水平排列在一行上。重设左盒子的宽度、高度皆为120px，可以观察到因为"body"盒子较窄，所以右盒子被迫换行并且因为左盒子的高度超过了中间盒子，右盒子被卡在了中间盒子下方。

以上为浮动盒子的特性。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

题目内容大部分是对浮动的讲解，所以本题考查的是对浮动的知识，如果你对浮动还不太熟悉的话推荐看一下我对浮动讲解的文章：浮动 ，那么现在开始解题吧。

描述五：浮动—清除

---

通过前面的学习了解到，浮动元素会脱离文档流，因此不会影响其他元素。但,在之前介绍浮动盒子时提到了"文档流中的元素几乎认为浮动盒子不存在"，实际上被浮动盒子覆盖的区域中的文本内容会识别到浮动盒子并且绕开浮动盒子。

现在给类名为"media"的盒子设置"float: left"属性，让该盒子成为浮动盒子，背景色可以自定义便于观察。此时可以观察到盒子下方的文字内容跑到了盒子右侧。通过调试工具可以发现，两个"p"标签被浮动元素所覆盖，并且内部的文字识别到了浮动元素从而绕开了浮动元素。如果给"section"元素添加边框，就会发现"section"这个父级盒子的高度只有两个"p"标签那么高，并没有将浮动元素的高度计算进去，这样会让布局很困难。

clear属性的值有"left"、“right”、“both"和"none”，用于指定盒子的那一侧不应该紧挨着浮动盒子。现在再给类名为"clear-left"的"p"标签设置"clear: left"属性，现在可以发现"universe"文本到了浮动盒子的下方并且"section"盒子的高度也发生了变化，该高度包含了浮动盒子的高度。

完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

题目内容大部分是对浮动清除的讲解，所以本题考查的是对清除浮动的知识，如果你对清除浮动还不太熟悉的话推荐看一下我对清除浮动讲解的文章：清除浮动 ，那么现在开始解题吧。

每次做完题提交成功的话都会弹框配带音乐鼓励你，我很庆幸，因为我找到了牛客。

个人总结：

今天题目就讲解到这，承接对上篇文章的内容对知识进一步加深学习，人的记忆可能会遗失，但人的潜力是无限的。每天刷题一次，对已学的知识不断巩固，这样的人是很容易成功的。牛客讲真的确是一个好的刷题网站，对于基础薄弱的人来说不亚于福音，如果认同我的话，就点击右边链接注册刷题吧🥑： 牛客网

加油！！！未来伟大的前端工程师，可能就是你~~，点个关注一起加油！冲！

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。