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

前言

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

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

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

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

1、聊天扯淡挺热闹,提个技术问题瞬间死寂?
——放心,在这个群里,拒绝扯淡,只谈学习。技术提问,必有回应~

2、独自一人无目的学习、没有学习目标?
——管理员会根据每人的基础做合理的学习计划、定期监督提醒~

3、自己学得怎么样?知识掌握的好不好?稀里糊涂的?
——群内提供阶段性技能水平测试,个人水平一目了然~

4、群里有没有技术大牛可以讨论的?
——每周邀请嘉宾(技术牛人、或妙味全职讲师)进行技术主题分享

5、做了练习无人点评、也不知道哪里可以优化或改进?
——专属的练习提交地址,会有资深讲师进行专业点评

6、都说进群抢红包,这群里会经常发红包么?
——围绕学习的奖励红包层出不穷,甚至会有奖学金提供唷~

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

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


2018 年 3 月 21 日,我们开始尝试第一次微信群内技术分享。

以下内容就是微信群内关于 grid 网格面试题分享:

笔试题之一:如何用 grid 写一个左右固定,中间自适应的三栏式布局?

笔试题剖析:

这道题考核的有两点:

  • 第一点是左右固定,中间自适应的三栏式。如果这个不理解,那么这道题就没法继续。

    • 三栏式是前端布局中的经典案例,以前的解决方式有圣杯布局,双飞翼布局等。所以考核的基础就是掌握这些经典案例。
  • 第二点再接着才是重点,用 grid 如何实现?grid 出来还没多久,这就考核了作为一个前端开发工程师对于最新技术动向的掌握情况,可谓是一题多考。

在这个面试题里,涉及到 grid 的知识点其实并不多。一条 grid-template-columns 样式以及一个相对单位 fr。

笔试题解答:

用 grid-template-columns 样式把容器分成三列,左右给固定宽度,中间给 1fr 即可。
  1. 代码:
  2. .box{
  3. display: grid;
  4. grid-template-columns: 200px 1fr 200px;
  5. }
解释样式:grid-template-columns

这条样式就是用来在容器中分列的样式,意思就是你要把这个容器分成多少列。

我们现在需要三个格子,所以分成三列。里面的参数可以是任意多个,那么一个参数代表的就是一列的宽度。比如,上面写的第一个参数是 200px 那么代表了这个网格中,第一列网格的宽度就是 200px 后面的以此类推;

第二个参数比较特殊:

我写了一个 1fr 这里面的这个 fr 是一个相对单位,和弹性盒模型里面的 flex 一样 意思是一份。

  • 如果三个参数写的都是 1fr 那么这个网格会被分成三份,这时候每一列的宽度就是父级宽度的三分之一;
  • 如果写五个 1fr 那么每一列的宽度就是父级的五分之一;

再回过头来看看之前的代码:grid-template-columns: 200px 1fr 200px;

在这里 css 首先会把父级的宽度减去 400。分别是第一列元素两百第三列元素二百,然后把剩下的宽度分成一份,给到第二列,于是乎,左右固定中间自适应的三栏就这么出来了。


问题交流时间:

Q:老师 fr 是什么?
A:fr 是一个相对单位,代表一份

Q:grid 是新出来的一种布局吗
A:是的 新出来没多久,因此出现在笔试题中,应该是考验大家对新东西的关注程度

Q:兼容性怎么样?
A:因为 grid 出来没多久 所以兼容性还不太好 但是一定是以后布局的一个趋势(参考下图)

Q:这是 H5 的内容吗?
A:这是 css3 的

Q:这东东和弹性盒模型,flex 布局有什么区别?
A:不管是 grid 还是 flex 都为我们解决页面上的复杂布局提供了更多的方法 grid 号称二维布局 那么它更强大的地方也在这里,通过 grid 我们可以像填表格一样去填充页面上的内容 简单的一句话 grid 专注于页面整体的布局 flex 更偏向于决绝局部的麻烦

Q:那弹性合模型呢,以后会被它代替?
A:弹性盒模型不会被代替,但是这个比弹性盒模型功能更强大

Q:既然 grid 已经分出了三列,box 中添加三个子 div 有什么用呢?给每个 div 添加颜色他会自动识别每一列的宽度么?
A:grid 分出了三列只是画了格子并没有内容内容还是要往里面填充的呀,给每个 div 添加一个颜色只是让大家能看到效果

Q:我知道是效果的问题,但是子 div 没有给宽度,他是怎么识别的?
A:父级划分好了格子 子元素自动占满格子

Q:如果我在 Box 中写了很多 div 而只划分三列会有什么效果?
A:会自动换行

Q:自动换行的也会照上面的分成三列?
A:是的,第二行也会是三列 也就是说如果出现第四个元素,那么第四个元素也会排在第一列

Q:假如有 10 列,总不能写 10 个 1fr 吧?
A:可以用 repeat 函数

Q:repeat 函数 是 js 的?
A:不是的,是 grid 中的 repeat 函数,纯 css 的方法

Q:换行后,原来的高度不会变吧?
A:如果给子元素定义了高度 那就是定义好的高度 如果没有定义高度 那么会继承父级的高度,如果父级中没有定义行,那么多行的情况下会平分父级的高度并且如果单独定义一个子元素的高度,那么这一行的子元素高度都会受影响

Q:能不能出个 9*9 方格的例子?
A:代码如下:
.box{
height:100%;
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 200px auto 200px;
}


  • 开群的第一天,
  • 群内活动受到大伙各种花式赞赏,
  • 并且群内红包不断飞舞……
  • 无论是热心解答问题的小伙伴,
  • 还是积极参与技术分享问答的小伙伴,
  • 均有红包奖励:


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
• 微信:miaov-class

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