牛客前端宝典——刷题 ##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干货盘点# 前端歌谣的刷题之路-第五十六题-移除数组中的元素
253 0
#yyds干货盘点# 前端歌谣的刷题之路-第五十六题-移除数组中的元素
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十九题-call
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十九题-call
198 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十九题-call
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百七十题-bind
#yyds干货盘点# 前端歌谣的刷题之路-第一百七十题-bind
271 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百七十题-bind
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十八题-object.create
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十八题-object.create
154 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十八题-object.create
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十七题-Array.reduce
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十七题-Array.reduce
202 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十七题-Array.reduce
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十七题-Array.map
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十七题-Array.map
311 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十七题-Array.map
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十六题-instanceOf
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十六题-instanceOf
255 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十六题-instanceOf
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十四题-快速排序
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十四题-快速排序
209 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十四题-快速排序
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十一题-事件委托
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十一题-事件委托
254 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十一题-事件委托
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十题-object.freeze
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十题-object.freeze
166 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百六十题-object.freeze

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1360
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    641
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    501
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    499
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    607
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    790
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1556
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    364
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1275
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    615