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

前言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


VIP 进群:

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

以下,是微信抱团群内举行的一次文字技术分享,全程内容如下:


16:00 分,妙味-小妖上场:

今天又到了讲师分享的时间了。
一般来说,我们有群内技术分享的安排呢,
会在下午的 4 点左右。

今天的分享形式是文字的方式。
也就是说,
我们稍后会邀请一位讲师在微信群内,
给大家做文字的技术分享。

考虑到大家是首次进群,
所以有些情况还是先和大家说明一下:

我们经常在群里做技术分享,
这种分享是不定期的,
考虑到这会儿不知道有多少人在围观,
所以……按照惯例,
我先发个打卡红包,
看看大家有多少人在线?

看样子人不少唷,好,那我继续~

今天讲师讲的内容是从基础开始,
也就是我们的前端开发的 CSS 部分。

今天分享的内容呢,是前几天的一道测试题。
考虑到这个群是今天第一次建群,
应该有许多朋友没有做过那个测试题。
所以我们就不再过多的去说测试题的事儿了。
而是由讲师直接把测试题的内容拿出来和大家做分享。

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

好了,废话不多说。
我们的群分享现在就开始。
在分享过程中,大家请尽量不要打断,如果有相应的问题可以提出。谢谢大家配合。

下面邀请妙味全职讲师宋承龙,给大家带来精彩的分享内容。

妙味讲师宋承龙:

大家好 我是宋承龙

今天给大家分享几个小的知识点
1、CSS3 结构性伪类
2、浮动
3、less 相关知识

先来看《CSS3 结构性伪类》吧

同时呢,这也是我们测试题中第五题用到的主要知识点

其实主要就是 nth-child 和 nth-of-type 这两个伪类的区别

理解了这两个伪类的区别之后这个题就很简单了

首先来看nth-child

看看官方是示例:
例:p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素

说实话 我第一次看到这句话的时候
我整个人都是懵的

有时候官方文档那种描述方式
可能并不是给人看的
所以我结合我的研究给大家翻译一下:

p:nth-child(2){} 这个选择器选择的就是 p 标签父元素里面的第二个子元素,并且这个子元素必须是p标签

注意这里面我说的是子元素,划重点!

以题中的结构举例说明:

如果我们要选择二个p标签
那么其选择器应该是 p:nth-child(3){}
因为第二个 p 标点是 box 里面的第三个子元素,并且正好是 p 标签,所以能选中
那如果要选择 h2 标签呢?
p:nth-child(1) 明显就不行

因为第一个元素是 h2 标签 必须写成 h2:nth-child(1){}
所以记住我的解释

敲黑板划重点啦!
E:nth-child(n) 表示 E 父元素中的第 n 个子元素( 这个子元素必须是E )
再来看 nth-of-type

官方解释就不看了 直接看翻译

E:nth-of-type(n) 表示 E 父元素中的第 n 个 E 元素
举例说明,同样还是选择第二个 p 标签

那么这时候我们就可以这么写 p:nth-of-type(2){}
这样就能选中第二个p标签了
注意 是第二个p标签而不是第二个子元素!!划重点!

first-child 以及 last-child 也很好理解
不过还是以题中的结构来看

如果要选择 h2 标签
就可以直接用 h2:first-child

其实 E:first-child 表示的是 E 元素的父级中的第一个子元素
并且这个子元素必须是E
这一点大家要记清楚了

那么理解了 first-child 之后
last-child 也就不难了

一个是父级中的第一个子元素 一个是父级中的最后一个元素
行 以上一个伪类大家还有哪里不能理解的?

大家纷纷表示这段都理解…


接着来看《浮动》的问题

同时它也是我们测试题中第七题的主要知识点

其实这个题很好解 如果大家对浮动的影响不太熟悉的话其实也能猜对的

我们分别来看每一个答案的描述 可能前面三个大家都不太确定

但是看最后一个答案:
不设置宽度,宽度可以由内容撑开。

仔细想想,貌似内联元素就是这样子的吧?

所以最后这个描述不全面

答案也就是 D 了

但是浮动这东西在我们布局当中还是相当重要的

所以我们还是来看看浮动的一些问题

那么说起浮动造成的影响,
估计大家首先想到的就是高度塌陷问题了,
这种比较经典的问题大家可能都会

但是浮动对于布局造成的影响可不仅仅只是高度塌陷这么简单

首先看第一个答案:提升层级;

浮动会提升层级么?来看一段代码大家就知道了

图中是一个盒子包含了两个子级,很正常的布局
接着我们把第一个元素(粉色)改成浮动

可以看到页面中的 second(红色盒子)不见了,只剩下了 first(粉色盒子)

其实 second 并没有消失,只是被 first 盖住了

这证明了两件事情

第一:first 脱离文档流了(只有 first 脱离文档流,second 才会往上移)
第二:first 提升层级了(按理来讲,second 应该会盖住 first: 后者覆盖前者)

那么这一个例子当中就可以排除掉前面两个答案了

再接着看第三个答案:阻止 margin 传递

我们都知道,正常父子级元素,当子级有 margin-top 值的时候,会传递给父级(表现为影响父级的位置)

如图:

图中我们并没有给父级 box 加任何的 margin 值,但是它的位置依然受到了影响
这就是因为其子元素中有 margin-top 值

接着我们给 box 加上浮动

这时候发现 box 的位置回到原来的位置了,子元素的 margin-top 值也起作用了

那么第三个答案明显也是属于浮动造成的影响:浮动会阻止 margi 值的传递

再看第四个答案:不设置宽度,宽度可以由内容撑开

刚才我们说了 内联元素就是这样的
所以这个答案描述不准确

图中的 div 就是被内容撑开的宽度
所以第四个答案的描述并不准确,准确的描述应该是
浮动元素不设置宽度的时候,宽度可以由内容撑开

关于浮动造成的影响?

我整理了一个列表 大家可以参考一下:
1、让块元素在一排显示
2、让内联元素支持宽高
3、浮动元素默认由内容撑开宽度
4、脱离文档流(不会撑开父级的高度——塌陷,坍缩)
5、阻止 margin 叠压(传递)

行 对于浮动这一块 大家还有什么问题么?


以下是现场提问:

问:margin-top 是个兼容问题,我之前看这个题的时候第一反应是假如我给它一个margin-left; 难道 浮动就会让它 margin-left 消失吗!理解错题的意思了!

答:略。

问:浮动为什么会使块级元素变成 inline-block?老师

答:不是让块元素变成 inline-block,浮动的本质是破坏了line-box

问:只有 margin-top 会传递吗,其他三个属性有没有这个现象?
答:只有它会这样。

问:margin-top 叠压问题 我给父级元素加透明 1px 边框这种做法可取吗?
答:可以的,给父级加边框 ,内填充 以及触发 BFC 都可以解决这个问题


妙味讲师宋承龙:

行 继续看下一个问题

大家不妨猜猜?
前三位猜对有红包奖励哦~


然后大家 “其次跨啦” 一通回答……

可惜只有一位答对(所以只好发出一个红包奖励)


上面的 css 部分使用 less 写的,那么这就要求大家对 less 有一定的了解了

先来看这段 less 代码

第一句就是声明了一个变量,存的值为 240px

有人问:loop() 是一个函数吗?
讲师答:这个和 js 中的变量是一样的


问:如果是为什么没有 {}
答:大括号没有


继续分享:

刚才我们声明了一个变量

接着这个变量用在了 .box 这个类的 width 属性身上,那么这代表着 .box 类的宽度就会变成 240px

这里就会去调用变量 所以 .box 的宽度就变成 240px 了

这个应该很好理解

再看,.box 类第一句话就声明了 display 属性,并且值是 flex

弹性盒模型的知识也来了

弹性盒模型呢我们一会再说,先把 less 说完

刚才讲到 .box 的宽度因为引用变量 会变成 240px

并且还声明了弹性盒模型

弹性盒模型我们一会再说,先把 less 说完

再往下 声明了一个 .loop 类

并且这个类后面接收一个参数 这是 less 中的传参(先不管后面的 when)

也就是 less 中的带参数的混合

这一段知识点在我们官网视频中 less 实战入门视频的第 6、7 集有讲到

感兴趣的同学课后可以去看看哈

https://study.miaov.com/study/show/chapter/400

接着往下

后面的 when 翻译过来就是: 当…时候的意思

那么用在这里就变成了一个条件语句

当传入的参数 n 大于 0 的时候就执行里面的代码

在往里面走,在里面直接就调用了 .loop

熟悉 js 的话应该就能看出来

这是 js 里面的一种递归

不过大家在这里一定要注意 条件一定要写好 不然很容易死循环

再往下走定义了一个 .div 类

并且后面 less 中的字符串插值把参数 n 也拼接进去了

那么得到的结果将会是 .div3 .div2 .div1 因为上面有执行条件 所以只会编译出来这 3 个

并且三个类里面都有 flex 属性 这是弹性盒模型里面的份数

于是得到的最终 css 将会是这样的


问:老师你这 css 顺序你是不是倒过来写了?
答:并没有


这里面的调用会比下面的div更快得到结果
所以第一个出来的是 div1

less 问题解决了 再接着看 flex
在这里父级设置了弹性盒模型
然后宽度总共是 240px

三个子级的 flex 加起来是 6
所以 css 会把父级的宽度分成 6 份
div1 占一份 div2 占两份以此类推
于是最终结果出来了,div1 的宽度是 .box 的 1/6

最终我们得到的 div1 的宽度就是 40px 了

对于弹性盒模型的更多知识点
大家也可以随时关注本群以及我们的官网视频

(分享完)


精彩课程推荐:

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

妙味 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客服
微信客服
返回顶部