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

前言

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

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

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

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

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


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

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


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

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


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

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


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

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


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

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


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

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


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


VIP 进群:

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


时间到,《Web 前端抱团学习群 CSS 测试题 0408 》讲解分析,准备开始

各位小伙伴下午好,昨天我们发布了两套难易程度适中的基础测试题:CSS 和 JS;

截止至 4 月 11 日 12 点,CSS 测试题,已近收取 200 份答卷。通过后台的统计结果来看,大家对 CSS 布局基础还是稍有欠缺的。

60 分以上的同学,继续努力,个别知识点需要加强,查缺补漏,继续学习。
50 分以下的同学,需要加油喽,一会儿的测试题分享,一定要仔细听。

时间:16:00
嘉宾:妙味讲师宋承龙、莫涛
方式:微信群内-文字直播


今天我们先说说 CSS 这套测试题。总的来说这套难度并不是特别高、也没有很生僻,大多是检测同学们的基础知识掌握情况。

而测试结果却很让人吃惊,截止到今天中午下午3点钟,只有 8 人得分在 70 以上。

得分 60 分以上的同学也不过 22 人(包括 70 分以上的 8 人)其余都在 50 分以下。

所以同学们,对于CSS这块的知识,可要加油学习了。

原本我们准备大把的红包准备给80分以上的同学发个奖励,鼓励一下大家。

但是现在没办法,只好把分数向下调到70分了,却也只有8人能获奖。

稍后我会给到这个 8 名同学每人红包的奖励。

好了,话不多说,我们还是听讲师的讲解吧

在分享过程中,请各位伙伴保持安静,会给大家提问时间的

欢迎妙味全职讲师 宋承龙 闪亮登场


主题:《Web 前端抱团学习群 CSS 测试题 0408 》讲解分析

解析
这个题其实是考验大家对标签的熟悉程度,其实布局大家都会,不就分块,然后用 div 堆嘛 大不了用个定位!

但是有一些细节我们也需要去考虑的
元素类型就是比较重要的一点

大体来说,元素类型可以分为内联元素与块元素两种

我给大家总结了一下这两种元素对比的一些特性,大家可以参考一下

  • 内联元素的特性:

    • 1、同排可以继续跟同类的标签
    • 2、默认由内容撑开宽度
    • 3、不支持宽高
    • 4、不支持上下的 margin
    • 5、代码换行会被解析成空格
  • 块元素的特性:

    • 1、默认独占一行
    • 2、没有宽度时,默认撑满一行
    • 3、支持所有 css 命令

由此就可以看出来,块元素和内联元素最简单的区别就是看是否支持宽高以及是否在一行显示

要判断一个元素是内联元素还是块元素,我们也可以直接在调试工具中,查看元素默认的display,为 block 则为块,没有 或者 是 inline 是则为内联

当然了,大家还可以去看官方文档

回到题中,其中 strong 标签,time 标签都是内联元素,所以答案选 B D

注意:li 是块元素,这个要记住,很多人都把 li 当内联元素在使用
最后给大家分享一条布局原则:同级元素里面,尽量不要出现不同类型的元素
也就是说内联元素最好是和内联元素同级,块元素和块元素同级,这样能避免很多问题哦

解析
这道题考的点其实很基础,但是也很重要,就好像1+1=2一样 可能每个人都知道,但是它确是决定布局的基础。
盒模型,也就是我们布局用的标签,每个标签都相当于一个盒子
在页面布局的时候是一个个盒子或嵌套,或排列来决定页面中的内容该如何排列

那么在这里面如果说对于盒模型的理解不够透彻的话,那么很可能布局出了问题 但是却不知道为什么

  • 盒模型的基本组成有这么一些属性:

    • width/height
    • padding
    • border
    • margin

      • 这四个属性是影响盒模型的基本属性了
        • width:规定了盒模型内容区的宽度
        • padding:规定了盒模型的内填充
        • border:规定了盒模型的边框
        • margin:则规定了盒模型的外边距

那么一个盒模型,我们能看到的东西其实大家回想一下应该就知道了
给一个盒模型加上宽高以及背景颜色我们就能看到这个盒子了
再加上 padding 盒子则会变大
再来一个 border 盒子就有边框了

而 margin 呢
给一个盒子加上margin 无论再给盒子添加什么样式,我们都不能很直观的看到 margin 所存在的区域
有了这么一个推论 再结合我们的题答案就不难得到了
题中提到了这么一个词:可视宽度
直接理解字面意思,那就是可以看到的宽度 我们刚才说了 可以看到的东西就是width padding border

所以答案:B C D

解析

这个题中其实要点就是看大家对 em 这个单位的了解,以及对各个浏览器一些小特性的了解

首先 em 是相对单位,相对的是当前元素的 font-size 值 这个大家都知道,
但是当当前元素的 font-size 的值也是用 em 为单位的时候,大家就有点懵了,这不按常理出牌啊~

那当 font-size 的值也是用 em 为单位的时候会怎么样呢?
其实这时候另外一条基本的知识点就出来了 那就是继承——font-size 这个属性会继承。
什么意思呢,也就是当子级没有规定font-size的时候,文字大小会继承父级的文字大小。所以,当前元素没有 font-size 值的时候,会继承查找父级的 font-size 值。

所以题中 box 的 font-size 里面的 em 则是相对于父级的 font-size 去进行计算的
那么 #box 的 font-size 值也就是说 20*0.5 得到 10px

不过还没完,题中还有一个前提:chrome 浏览器

谷歌浏览器对字体大小是有限制的——最小限制 12px
虽然上面我们得到的结果是 10px,但是由于限制,最终的结果为12px 5*12 = 60px

所以答案:B、12*5 = 60px

这道题中只是考验大家对 chrome 浏览器的了解 如果再深入一点 则有可能会考到低版本IE 浏览器的一些兼容问题。
虽然目前低版本IE浏览器的兼容问题随着时间的推移已经被慢慢淡化了,市面上大多数公司的最低兼容需求是IE8,不过大家可以作为补充去了解一下 特别是 IE6 时代的各种经典的兼容问题。

解析
这道题的重点其实只有一个,那就是 2D 变换各个函数的执行顺序问题
其实关于2D变换函数的计算顺序 结来说一句话:那就是后写先计算
这里我给大家画了一个示意图,根据图中所示,

第一步:执行scale函数
scale 是缩放函数,里面的参数规定了元素缩放的倍数
在这里要注意的一点就是,尽管是缩放函数,但是变换还是根据元素的中心点来进行变换的

比如给1.2 那么元素则会放大为原来的 1.2 倍
这里写入的参数是 0.5 所以元素会被缩小为原来的一半,原来的.box 宽高为 100 那么缩小之后的.box 宽高则会变成 50*50(如图中 scale 所示)

接着第二步:计算平移 translateX 函数
这个函数则规定元素在X轴方向的移动,给正值往右边移动,给负值则往左边移动
那么执行完translateX函数之后,元素则会往右边平移 100px,得到 translate 所示的位置

接着计算第个函数:rotate 也就是旋转
那么这时候元素则会以 translate 所示的位置为起点 围绕中心点进行旋转 rotate 里面的参数 180deg 是旋转 180 度的意思,旋转之后最终的位置就是 rotate 所在的位置了

过程我们都清楚了 这时候就可以来算一下距离了
再来一张图看一下

首先来看 A 段的距离,原 box 的大小是 100100
然后围绕中心点缩小到了 50
50
scale 的宽度是50 比原box小50 然后scale左右两边还有间距 而且是一样的 所以不难得出A段距离为25

然后 B 段就比较简单了,直接就是 translateX(100px)

再来看 C 已知scale的宽度是50 中心点正好把scale平分 所以C段:100-25 =75

至于 D 因为 rotate 是围绕着中心点进行旋转的 所以 D 段其实就是 C 段旋转过去之后得到的结果,所以 D 也是 75

最后 E 段,中点把原 box 分成了两个50 所以 E :75-50=25

最后 rotate 的宽度是 50 再加上E 是25 那么最后 rotate 之后元素的左边距离原box 的左边的距离就是 75 了


精彩课程推荐:

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

远程《零基础前端开发 “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客服
微信客服
返回顶部