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

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

🍁个人主页：亦世凡华、

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

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

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

🥥前言：

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

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

描述一：浮动和清除浮动

请将类为”left”的div元素和类为”right”的div元素在同一行上向左浮动，且清除类为”wrap”的父级div元素内部的浮动。

根据题目所示，不难看出题目所考知识点是对浮动与清除浮动的考查，如果你没有完全掌握浮动与清除浮动的知识推荐看一下我之前对浮动与清除浮动讲解的文章：清除浮动，那么现在开始解题吧。

思路一：

使用overflow:hidden 这个属性来清除浮动，但是当父元素有需要溢出的元素显示，当父元素设置了overflow：hidden后，会导致这些溢出的元素内容无法正常显示。但对于这题而言没有问题，这种解法完全可以的。

思路二：

使用清除浮动的样式属性 clear，给类名wrap添加一个div子元素,然后给这个元素在style中设置”clear:left”; clear：left的作用是清除左侧内容的浮动效果。在日常开发中为了省事，我们一般都是clear:both; 清除两侧。

思路三：

双伪元素法，在style中父元素，给父元素添加伪元素代码：.wrap:after,.wrap:before{ content:’ ‘; display:table; } .wrap:after{ clear:both; } .wrap{ *zoom:1; } 其中display：table是以表格的方式，table(相当于<table></table>)，一起配合使用的还有：

display: table-header-group;(相当于<thead></thead>)

display: table-row-group;(相当于<tbody></tbody>)

table-footer-group;(相当于<tfoot></tfoot>)

display: table-row;(相当于<tr></tr>)

display: table-cell;(相当于td)

zoom是IE专用属性，firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例，设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题，通常，在给低版本的IE做兼容的时候会用到zoom:1，为了防止低版本的IE浏览器不支持after选择器或者某些属性，在最后加上zoom:1来清除浮动。

描述二：固定定位

请将html模块类为”box”的div元素固定在视口的左上角。

根据题目所示，不难看出题目所考知识点是对定位中固定定位的考查，如果你没有完全掌握三种基本的定位知识推荐看一下我之前对定位讲解的文章：固定定位，那么现在开始解题吧。

描述三：CSS单位（一）

请将html模块中类为”box”的div元素的宽度和高度设置为自身字体大小的4倍。

根据题目所示，不难看出题目所考知识点是对CSS中单位的考查，如果你没有完全掌握对单位的了解，这里简单的叙述一下：

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

那么现在开始解题吧。