牛客前端宝典——刷题 ##Day5

最新推荐文章于 2024-05-23 11:23:05 发布

亦世凡华、

最新推荐文章于 2024-05-23 11:23:05 发布

阅读量306

点赞数 7

分类专栏： # 前端刷题文章标签： html 前端 css css3 html5

本文链接：https://blog.csdn.net/qq_53123067/article/details/125800833

版权

前端刷题专栏收录该内容

15 篇文章 24 订阅

订阅专栏

🍀作者简介：在校大学生，为前端方向努力拼搏的一名追梦人。

🍁个人主页：亦世凡华、

🫒系列专栏：牛客前端宝典

🍂想要和博主一起学习前端或想巩固自己知识，可以点击链接：牛客网推开自己的世界之门。

🏍️任性的要求我从来没提过，只想你能每天关注我。

🥥前言：

🏆编程就像我们平常做题一样，如果只是一味的学习不去做题的话所得到的效果微乎其微。因此我也是在网上寻找了很多题库但一直用的不舒心，直到找到了牛客，我才找到了学习做题的乐趣，不仅其能够很系统的将所学知识点梳理学习，也因其代码整洁题解清楚明了让人很快掌握知识。为此我是愿意和大家分享出来，一起学习。

今天我们讲解零基础入门前端类型的题库：点个关注我们继续走下去。

描述一：盒模型 - content-box

描述一：盒模型 - content-box

盒模型是CSS的核心概念，描述了元素如何显示，以及在一定程度上如何相互作用、相互影响。页面中的所有元素都被看作一个矩形盒子，这个盒子包含元素的内容、内边距、边框和外边距。
内边距是内容周围的空间，当给元素填充背景时会作用到元素的内容区域和内边距区域。边框会在内边距外且紧挨着内边距。边框的外侧是外边距，外边距是围绕在盒子可见部分之外的透明区域，用于控制元素之间的距离。
默认情况下，width和height是指盒子的内容区域的大小，如果此时给盒子添加内边距或边框，那么会导致整个盒子变大。现在给类名为"content-box"的盒子设置宽度、高度都为"80px"、内边距为"5px"、边框为"5px solid black"，此时可以打开调试工具查看该盒子的大小，会发现该盒子实际是一个长度为"100px"的正方形，并不是"80px"。
实际上还有另外一种盒模型，它的width和height的计算方式和当前的盒子不同。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

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

描述二：盒模型 - 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"盒子的高度也发生了变化，该高度包含了浮动盒子的高度。
完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

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