【WEB 前端抱团学习群】0412期技术分享:CSS测试题

前言

2018 年伊始,我们准备实现一个小目标:

打造一个技术交流氛围浓郁的微信群。
让大家在这个群里轻松交流技术、没有扯淡,
拒绝吐槽,只关注技术学习本身。

因此,【WEB 前端抱团学习群】 就此诞生。

我们为这个群倾注极大精心与资源,期待给这个群提供诸多福利,例如:

1、聊天扯淡挺热闹,提个技术问题瞬间死寂?


——放心,在这个群里,拒绝扯淡,只谈学习。技术提问,必有回应~

2、独自一人无目的学习、没有学习目标?


——管理员会根据每人的基础做合理的学习计划、定期监督提醒~

3、自己学得怎么样?知识掌握的好不好?稀里糊涂的?


——群内提供阶段性技能水平测试,个人水平一目了然~

4、群里有没有技术大牛可以讨论的?


——每周邀请嘉宾(技术牛人、或妙味全职讲师)进行技术主题分享

5、做了练习无人点评、也不知道哪里可以优化或改进?


——专属的练习提交地址,会有资深讲师进行专业点评

6、都说进群抢红包,这群里会经常发红包么?


——围绕学习的奖励红包层出不穷,甚至会有奖学金提供唷~

7、还有更多可能的探索,我们会动态调整、不断尝试……


——也欢迎群友为我们提供各种建议,我们会认真倾听、努力改进~


VIP 进群:

“爱学习的人总是少数,但是大多数学习者都在这里!”
  • 扫码关注公众号,发送”VIP进群”关键字,入群共同学习,审核通过后入群


解析
这道题其实知识点不多 但是迷惑性很强;
这里涉及的知识点就是less里面的混合语法:定义一些通用的属性集为一个 class,然后在另一个 class 中去调用这些属性,只不过这里的混合是带参数 并且是有条件判断的

  1. 首先
  2. .box(@a:1)when(@a=1){
  3. nav{
  4. color:red;
  5. a{
  6. color:blue;
  7. }
  8. }
  9. }

这段代码定义了一个box类,并且带有一个参数a.
@a 是 less 里面定义变量的基本语法
@a:1 这是在定义这个变量的同时,赋予这个变量一个默认值

  • 如果在调用 box 类的时候传入了参数 a 那么 a 就等于传入的参数
  • 如果在调用的时候没有传入参数,那么变量a的值则是默认值

后面 when(@a=1) 是一个条件判断语句,意思是当括号里面的条件成立,则会执行后面的代码 如果不成立,则不执行。

  1. 第二段
  2. .box(@a:1)when(@a=2){
  3. nav{
  4. color:yellow;
  5. a{
  6. color:green;
  7. }
  8. }
  9. }

这段带啊的作用和第一段差不多 只不过这里的判断条件换了一下

再接着看下面的调用:

  1. .box{
  2. .box();
  3. }

这里的 .box{} 其实是声明了一个新的 .box 类,和上面两段代码没有必然的关系,里面的 .box() 才是调用上面的代码。

而由于这里的调用没有传入参数,所以第一段 .box 执行,并且变量 a 的值会使用默认值,可以通过后面的when条件判断,所以会输出。

再调用第二段 而这时候条件不成立,所以不执行里面的代码 然后我们得到的结果就是

  1. .box{
  2. nav{
  3. color:red;
  4. a{
  5. color:blue;
  6. }
  7. }
  8. }
  9. 最终编译:
  10. .box nav {
  11. color: red;
  12. }
  13. .box nav a {
  14. color: blue;
  15. }

所以最后 a 标签的颜色是 blue。

友情提示:一般这一类的 less 面试题,可能还会考到 模式匹配 的一些内容,更多相关内容的话大家可以去我们官网看视频或者去看官方文档。

妙味视频:https://study.miaov.com/study/show/chapter/400
官方文档:http://lesscss.cn/


解析

这道题主要考验大家对一些基本知识的了解,这里考的不再是一个单独的知识点了,所以这就要求大家对知识点的广度也要过硬才行。

首先看选项 A<p>``</p>标签中可以包含<h2>``</h2>标签

这句话明显是不对的 尽管 P 标签是块元素 h2 也是块元素
我们都知道块元素是可以包含块元素的,但是凡事都有特例 而 p 标签就是其中的特例

文档类型定义(Document Type Definition)中规定了块级元素是不能放在P里;

P标签内包含块元素时,它会先结束自己

  1. 比如给定这样一个结构:
  2. <p>
  3. <div>test</div>
  4. </p>
  5. 最终html会解析成:
  6. <p></p>
  7. <div>test</div>
  8. <p></p>

而这样的标签还有 dt 以及 h1~h6 这些标签里面都不能再嵌套块元素

另外:

  • a 标签不能嵌套 a
  • 内联标签不能嵌套块标签

接着看选项 B:给元素加 overflow:hidden 之后,元素的子元素浮动了,依然可以撑开父级的高度。

这句话先不看前半段,先看后面:元素的子元素浮动了,依然可以撑开父级的高度。这就是我们平常所说的清浮动。

清浮动:也就是清除浮动的影响,而浮动的造成的影响就是由于浮动元素脱离了文档流所以造成父级的高度塌陷。

如果想要解决这个问题我们有很多方法,触发父级的 BFC 就是其中一个。

而想要触发 BFC 方法有很多,这里我简答的总结了一些,大家可以参考一下:

  • float 的值不为 none
  • overflow 的值不为 visible
  • display 的值为 table-cell、table-caption 和 inline-block 之一
  • position 的值不为 static 或 relative 中的任何一个

这时候再来看选项B中的前半段:给元素加了 overflow:hidden 之后,那么这不就触发 BFC 了么,所以选项 B 这句话显然是成立的。

接着选项 C:两个<div>``</div>元素默认会在一行显示

首先,div是块元素 这大家应该都没问题,而块元素的特征之一就是独占一行,所以这句话显然是不成立的。

最后选项 D:元素绝对定位之后,只会根据有相对定位的父级来计算自己的left、top

来看看绝对定位这一块的知识点,定位:这是一个解决特殊布局的方法。
比如轮播图上的左右切换按钮啦,产品图上的热点小图标啦之类的 一般都会用定位来解决。

但不是左右的布局都可以用定位来解决的 原则上是:能不用定位,则尽量不用定位

然后定位分为:相对定位,绝对定位以及固定定位三种:

  • position:relative (相对定位)
  • position:absolute (绝对定位)
  • position:fixed (固定定位)

每一种定位特性都不一样,一下是我的总结,大家参考一下:

  • 相对定位的特性:

    • a、不影响元素本身的特性;
    • b、不会使元素脱离文档流(元素移动之后原始位置会被保留);
    • c、如果没有定位偏移量,对元素本身没有任何影响;
    • d、提升层级
  • 绝对定位的特性:

    • a、使元素完全脱离文档流;
    • b、使内嵌元素支持宽高;
    • c、让块元素默认由内容撑开宽度;
    • d、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document发生偏移;
    • e、相对定位一般都是配合绝对定位元素使用;
    • f、提升层级
  • 固定定位的特性:

    • 与绝对定位的特性基本一致,差别是始终相对浏览器窗口进行定位;

所以当元素决定定位之后

  • 如果有定位父级,则相对定位的父级来计算自己的 left、top
  • 如果没有定位父级,则相对于document来计算自己的 left、top

解析:这道题同样还是考验大家对于各个 css 属性的了解,div 是块元素,这个不用说了。

而块元素的特性之前也已经讲过了 在没有给块元素添加width属性的时候,块元素的宽度是撑满父级的。那么想要让块元素的宽度由内容撑开,势必就需要改变元素的一些特性了

选项 A:display:inline;

  • 这条样式直接把元素的显示特性改成了内联元素,而内联元素的是不支持宽高的 宽度完全由内容撑开 所以这一条是成立的

选项 B:float:left;

  • 当给元素加上浮动之后,一些特性其实也发生了改变 浮动的特性大家参考一下:
    • 1、让块元素在一排显示
    • 2、让内联元素支持宽高
    • 3、默认由内容撑开宽度
    • 4、脱离文档流(不会撑开父级的高度——塌陷,坍缩)
    • 5、阻止 margin 叠压
      根据特性中的第二条可以得出这一条显然也是成立的

选项 C:position:relative;
这是相对定位,而相对定位的特性在第六题里就已经说过了:
给元素加了相对定位,如果没有添加定位值的时候(left,top…)除了让元素提升层级之外对元素本身是没有任何影响的,所以这一条明显不成立。

选项 D:和第一条是一样的 所以也成立。

这一题又是和浮动相关,从这里就能看出来,对于这些基础布局的知识点我们还是需要认真去对待的。

那么结合清浮动的方法:

  • float 的值不为 none
  • overflow 的值不为 visible
  • display 的值为 table-cell、table-caption 和 inline-block 之一
  • position 的值不为 static 或 relative 中的任何一个

掌握了这几条,那么这个题的答案也就显而易见了

解析

选项 A:没有设置 viewport 的时候,移动端浏览器得到的宽度全部都是 980 ,这没问题的;

  • 拓展思考:一个页面,任何样式都不用设置,直接获取宽度,那么在移动端浏览器上的到的宽度全部都是980

选项 B:viewport 的缩放比例设置的数值越大,视口宽度越小;

  • 对于viewport 我们都知道至少默认缩放比例是必须要写的,也就是initial-scale 那么这个缩放比例其实就相当于对页面进行放大或者缩小;

  • 当给定值为 1 的时候,是原来大小

  • 当设定值小于1的时候,相当于是把页面上的内容缩小了

而浏览器是没有发生变化的,那么也就代表了浏览器里面能放下更多内容了。

所以当缩放比例越小的时候,页面上就能放更多东西了,所以也就相当于视口宽度变大了
所以反过来,缩放比例设置越大,视口宽度越小 这条也成立

选项 C:像素比越大,视口宽度相对越小;

  • 像素比:其实就是用多少个像素去做一个像素的事情。
    • 当设备像素比为 2 的时候,屏幕会用 2 个像素点来渲染 1 个像素的内容 那么从这里来看的话,当设备的像素比为2 而分辨率是 750 的时候,实际上在这台设备上的宽度就变成了 375px。

选项 D:只要使用了 rem 单位,不同视口大小下页面会自动缩放,其实看到只要两个字,这一条基本上就不成立了。

我们移动端布局的时候都是用 rem 这个单位 rem 是一个相对单位 相对的是根元素的字体大小;而如果根元素的字体大小不发生改变 那么 rem 也就不会发生改变了 所以也就不存在页面自动缩放了。

解析

选项 A:关于响应式其本质就是通过媒体查询来适应不同的设备,不同的屏幕宽度,而媒体查询 Media Query 就能识别到不同的设备,不同的屏幕大小所以第一条是成立的。

选项 B 响应式适配移动端的时候不用设置 viewport 其实这一条我们去看看著名的响应式框架 bootstrap 就知道了。

Bootstrap 是移动设备优先的,而为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。

在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放 (zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。所以这一条也就不成立了.

选项 C:响应式布局,就是在不同的分辨率下,去跳转不同的页面,这是对响应式的基本理解。

选项 D:响应式布局,一般我们需要 js 配合动态修改元素宽度,也是响应式的基本理解了。

注意

  • 响应式是不需要 js 配合的 这一点不要和移动端搞混了;

  • 移动端需要用 js 去动态修改页面的缩放比,修改根元素的字体大小,响应式是不需要的 响应式是用媒询去针对不同的屏幕大小不同的设备然后给元素添加不同的样式来达到的一个效果。


精彩课程推荐:

足不出户,享受优质远程课程!

远程《零基础前端开发 “PC 端+移动端+响应式开发” 课程》
https://miaov.com/index.php/news/newsDetail/nid/322

远程《JS 前端资深工程师就业精英班》
https://miaov.com/index.php/news/newsDetail/nid/316

远程《妙味 React+redux 高阶实战项目班》
https://www.miaov.com/index.php/news/newsDetail/nid/338

超五星级优质远程课服务:

1、系统完善的课程体系——内容有保障;
2、技术精湛的资深讲师授课——品质有保障;
3、远程视频直播 + 录播双管齐下——复习有保障;
4、全职老师全天 14 小时轮换在线答疑——服务有保障;
5、作业批改与练习讲解服务——答疑解惑有保障;
6、阶段式测评服务——学习效果有保障;
7、结课项目由妙味讲师倾心指导——毕业作品有保障;
8、简历指导 + 面试过程专人跟进——学完就业有保障;


报名咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 电话:010-57269690
• 微信:miaov-class

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部