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

简介: 🏆编程就像我们平常做题一样,如果只是一味的学习不去做题的话所得到的效果微乎其微。

描述一:浮动和清除浮动

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

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

思路一:

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

图片.png

思路二:

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

图片.png

思路三:

双伪元素法,在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来清除浮动。

图片.png

描述二:固定定位

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

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

图片.png

描述三:CSS单位(一)

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

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

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

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

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

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

那么现在开始解题吧。

图片.png

描述四:CSS单位(二)

请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍。

注意:只需在css模块补全样式内容,请勿修改html模块。

对于这题上面的题目已经讲解很清楚,那么现在开始解题吧。

图片.png

相关文章
|
前端开发
#yyds干货盘点# 前端歌谣的刷题之路-第五十六题-移除数组中的元素
#yyds干货盘点# 前端歌谣的刷题之路-第五十六题-移除数组中的元素
64 0
#yyds干货盘点# 前端歌谣的刷题之路-第五十六题-移除数组中的元素
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十九题-call
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十九题-call
87 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十九题-call
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百七十题-bind
#yyds干货盘点# 前端歌谣的刷题之路-第一百七十题-bind
82 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百七十题-bind
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十八题-object.create
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十八题-object.create
52 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十八题-object.create
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十七题-Array.reduce
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十七题-Array.reduce
70 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十七题-Array.reduce
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十七题-Array.map
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十七题-Array.map
89 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十七题-Array.map
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十六题-instanceOf
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十六题-instanceOf
64 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十六题-instanceOf
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十四题-快速排序
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十四题-快速排序
64 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十四题-快速排序
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十一题-事件委托
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十一题-事件委托
86 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十一题-事件委托
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十题-object.freeze
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十题-object.freeze
58 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十题-object.freeze