【WEB 前端抱团学习群】0327 期技术分享

前言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


今天分享的内容来自昨天我们在群里发布的一个测试题。内容从 CSS 到 JS 再到 前端框架… WEB 前端内容全面包含。

一共 25 道题,总分 100 分,每道题回复时间最多 1 分钟,在 20 分钟内答完。看看大家能够获得多少分?

后期我们可以根据大家的知识点弱项,做有针对性的技术分享活动。

测试题地址:https://ks.wjx.top/jq/21809047.aspx


测试题发布以后,在 24 小时内共有 200 多人参与了测试,足见大家非常关注自身技术掌握情况。

在测试结束过后,我们第一时间邀请妙味讲师,给大家做了测试题讲解。

我们把测试题讲解分为三块:
1、CSS 部分的讲解:我们会在【WEB 前端抱团学习群】内以文字形式给大家分享;
2、JS 部分的讲解:我们会安排讲师在公开课与大家现场分享;
3、框架部分讲解:我们会安排讲师在公开课与大家现场分享;

今天记录的内容,就是 CSS 部分的讲解,也就是在【WEB 前端抱团学习群】内的文字记录:


以下是测试题的第一题统计结果:

问题解析:

  1. 首先 “超链接” 就是我们 html 中的 a 标签,这个应该大家都没问题。
  2. 再接着,"伪类":什么是伪类?
  3. css 对于伪类的解释是用于向某些选择器添加特殊的效果。
  4. 简单点说,就是你没定义这个类,但它确实作为一个类来使用。
  5. 再简单点就是你可以利用伪类为我们的元素添加各种不同的效果。
  6. 比如:
  7. a:hover { }
  8. 这段代码就是给 a 这个标签选择器添加了一个效果,这个效果在鼠标悬停于 a 标签上方时被触发。
  9. 并且,伪类还有权重(特殊性),《css权威指南》中指出,其特殊性为:0,0,1,0
  10. 也就是说伪类的权重和class的权重是一样的。这一点一定要注意,这一点一定要注意 一定要注意;敲黑板划重点!
  11. 再回到问题,css1 在给 a 定义伪类的时候,一共有四个伪类,分别是:link,visited,hover,active。并且这四个伪类一直延续到现在
  12. 其各自代表不同的意思:
  13. a:link 表示未被访问的链接 (在页面上写了,还没有访问过)
  14. a:visited 表示已经被访问过后的链接 (访问过了,注:判断是否访问过,是以浏览器的浏览记录为依据)
  15. a:hover 表示鼠标指针位于其上的链接
  16. a:active 表示活动链接 (当鼠标点下时的链接)
  17. 用中文表达就是:你在页面上写了一个链接,你打开这个页面的时候,这个链接处于 link 状态
  18. 当你要去点击它的时候,首先会把鼠标移到连接上去,这时候是 hover 状态
  19. 当你把鼠标点下去,还没抬起来的那一瞬间是 active 状态
  20. 完事之后就是 visited 状态了
  21. 看到这大家应该就要明白题中的 L,V,H,A 四个字母分别代表的就是 a 标签的四个伪类了。
  22. 考题第二点:顺序?
  23. a 标签的四个伪类书写顺序很重要么?当然重要!!!
  24. CSS设计指南》说到四个伪类的书写顺序一定要正确,否则浏览器可能不会显示预期的结果。
  25. 首先来看前面两个伪类:link visited 分别代表未访问的链接和已经访问的链接,那么一个链接不可能同时存在这两个状态,所以实际上这两个伪类的顺序是可以随意一点的
  26. 再来看 visited hover
  27. 假设 hover 写在 visited 的前面 并且这个链接已经被访问过了
  28. a:visiteda:hover 这两个选择器在权重上是一样的。那么根据 css 规则,权重一样的两个选择器选中同一个元素的时候,后者覆盖前者,所以 visited 一定要在前面。那么以此类推,link hover 之间的顺序也就毋庸置疑了
  29. 再来看 hover active
  30. 试想当我们要点击一个元素的时候,是不是一定会移动到这个元素身上?
  31. 也就是说想要触发 active 必定会触发 hover 伪类,还是权重一样,后者覆盖前者
  32. 那么四个元素的顺序就出来了 前面 link visited 后面 hover active
  33. 假设 hover 写在 visited 的前面 并且这个链接已经被访问过了,那么这时候鼠标移动到 a 标签身上,触发 hover,其颜色变成粉色(假设)。但是不要忘了,后面还有一个 visited 并且 a:visiteda:hover 这两个选择器在权重上是一样的。那么根据 css 规则,权重一样的两个选择器选中同一个元素的时候,书写在后面的选择器会覆盖前面的效果。所以这时候 hover 的样式会被 visited 覆盖。其导致的结果就是:当一个链接被访问过后,鼠标移动到这个链接身上将不会有任何的效果(表现为 hover 失效了)。那么以此类推,link hover 之间的顺序也就毋庸置疑了
  34. 再来看 hover active
  35. 试想当我们要点击一个元素的时候,是不是一定会移动到这个元素身上?也就是说必定会触发 hover 伪类
  36. 这时候如果 active 伪类写在 hover 伪类前面 在点击这个元素的时候,样式发生改变了,但是后面的 hover 权重和它一样高,又被覆盖了,所以这两个伪类之间的顺序也就很明显了 先写 hover 后写active
  37. 那么四个元素的顺序就出来了 前面 link visited 后面 hover active
  38. 最后再多嘴一句,既然 link visited 的顺序无所谓,那为什么一般都要把 link 放在前面呢?
  39. 一个链接,页面一上来其状态一定是未访问。从视觉顺序来排,link 在前面。)
  40. 所以最后的答案:L V H A
  41. 教大家一个小技巧:Lv!(路易威登,一个世界知名奢侈品品牌,女孩对其防御力为负无穷大!俗称泡妞利器)
  42. lv! haha...(如果你送女朋友一个lv,那她一定开心得哈哈大笑)

以下是测试题的第二题统计结果:

问题解析:

  1. 解析
  2. 首先题中提到了一个词“可视宽度”,根据字面意思我们可以理解为可以看到的宽度。
  3. 那我们来回忆一下,正常的盒模型当中什么css属性会影响盒模型的大小(即可视宽高?)
  4. width
  5. height
  6. padding
  7. border
  8. 那么问题代码中出现了一个 marginmargin 是盒模型的外边距,只会影响盒模型的位置,并不会影响盒模型的大小,所以这一条不用管
  9. 乍一看,上面的 css 代码中 width 100 border 4 个方向都是 5 像素 padding 10 像素
  10. 那么这几个宽度相加 100 + border-left:5 + border-right:5 + padding-left:10 + padding-right:10 = 130
  11. 也就是说选 110 170 的同学可以去面壁思过了...
  12. 但是!没完事呢!
  13. 再来仔细看看,css 代码中第一条:box-sizing: border-box;
  14. box-sizing 这条属性是 css3 这种新增的一条用于改变盒模型解析模式的样式
  15. 此属性有两个值,分别是:content-box border-box
  16. 一个正常的盒模型的可视宽度解析为:width + 左右 padding + 左右 border
  17. 这也正是样式中 content-box 这个值所对应的功能
  18. 而当我们把值设置为 border-box 之后,盒模型的可视宽度解析为:width(俗称怪异盒模型)
  19. 如果上面没看懂 我们再来引入一个概念:“内容宽”———— content
  20. 所谓内容宽就是盒模型的可视宽除去 border 除去 padding 所剩下的宽度(因为这些地方都放不了内容)
  21. 那么这时候我们可以得出正常盒模型的内容宽其实就是 width 所定义的宽度
  22. border-box 的内容宽则变成了 width - border - padding
  23. 再回过头来看我们的问题:内容宽是多少
  24. 第一行就定义了其解析模式为怪异盒模型解析模式
  25. 所以怪异盒模型的可视宽:width 在第二行就定义了 这时候不需要管下面的 border padding 等等
  26. 所以正确答案为:100px

以下是测试题的第三题统计结果:

问题解析:略


以下是测试题的第四题统计结果:

问题解析:

  1. 这里首先就要了解到什么是 BFC
  2. 经常听到大神说什么清浮动的原理之类的 什么 BFC FFC IFC
  3. 如果说上面三个词你一个也不懂... 甚至都没听过
  4. 那就要好好关注我们群分享啦
  5. 不过在这之前先去面壁十分钟
  6. 好吧 先来看 BFC 是什么
  7. BFC 英文全称 Block Formatting Context
  8. 关于全称这东西,大家了解一下啊 不用记,但是看到要知道是什么
  9. 别一说到 BFC 你头头是道,问你 Block Formatting Context 是什么一脸懵*就好了
  10. Block Formatting Context 翻译过来就是:块级格式化上下文
  11. 说中文:写 CSS 样式时,对一个元素设置 css, 我们首先要知道这个元素是块级元素还是行内元素,而 BFC 就是用来格式化块级盒子的。
  12. 它是指一个独立的块级渲染区域,只有块级盒子参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
  13. 翻译:BFC相当于一堵围墙,当你触发了一个元素的 BFC 那么就相当于在这个元素的四周建立起了一堵围墙,那么这时候围墙里面的元素和围墙外面的元素就不会产生相互影响。
  14. BFC 能解决很多问题
  15. 比较经典的就是当一个盒子的子元素全部都浮动的时候,那么这个盒子的高度将不会被子元素撑开
  16. 这是浮动所造成的高度塌陷问题
  17. 那么如果这时候我们触发这个盒子的 BFC 那么就能解决这个问题
  18. 说了这么多,那么到底触发 BFC 的条件有哪些?
  19. 这里我整理了一个列表,大家参考一下
  20. 1、根元素或其它包含它的元素
  21. 2float 的值不为 none
  22. 3overflow 的值不为 visible
  23. 4position 的值不为 static
  24. 5display 的值为 inline-blocktable-celltable-caption
  25. 6flex boxes (元素的 display: flex inline-flex);
  26. 那么对照这个列表我们就能得出这个题的答案了

花絮:

分享过程中,讲师出了一道抢答题,关于盒模型尺寸计算的。
前三名抢答成功者,可获红包奖励。以下是抢答题:

下述代码中,当鼠标放到a标签身上的时候,里面的文字是什么颜色?

问题发出去以后,迅速收到 10 多条回复……可惜都错了。经讲师提醒后,又陆续收到 20 多条回复,其中我们选了前三名正确的发放了红包奖励:


作业

给大家讲完了知识点,讲师留了两道练习,同样的规则,两个练习前五名提交,并且做的问题不大的,会有红包奖励。

作业一:要求如下所述

作业二:100% 还原设计效果图

作业提交帖:https://study.miaov.com/bbs/60102

至此,下午的文字分享结束~
明天分享继续进行中~~


VIP 进群:

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


广而告之:

足不出户,享受优质远程课程!
妙味 2018 年最新版 “从零基础到全栈” 全套 WEB 前端开发课程,现已开启远程班招生~

  • 资深讲师带领大家,只学精华内容、拒绝无用知识,配备走心远程服务:“直播+视频回放、全天超过 14 小时在线答疑、作业批改与练习讲解、丰富奖学金、全程面试远程指导服务…”
  • 凡你所要,必得满足!
  • 现在咨询,可享受更多课程优惠~

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

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

报名咨询:

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

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