为了账号安全,请及时绑定邮箱和手机立即绑定
慕课专栏

目录

索引目录

手把手带你打造自己的UI样式库

原价 ¥ 78.00

立即订阅
13 本章总结
更新时间:2019-06-28 10:16:05
从不浪费时间的人,没有工夫抱怨时间不够。

——杰弗逊

到这里,第二章的内容就要结束了,这一章的定位就是“磨剑”。这一章内我们学会了一些比较重要的基础知识,在后面的开发中就能身披利剑,斩妖除魔了。这个总结准备用问题的形式来带着大家回顾一下这章的内容,这些问题大多数是前面章节讲过的,也有一些是提过一点,需要同学们自己去扩展。这些问题都可以作为面试题,下面就来看这章的内容和相关的问题吧。

一、页面结构基础

这部分内容在前两节里,从浅入深的依次讲了盒模型、文档流和页面层级这些基本概念。我们来看下这一部分会出现的问题。

  • 你对盒模型了解多少?
  • 是否知道怪异盒模型?它和标准盒模型有什么区别?
  • 外边距折叠是什么意思?
  • 什么是文档流?块级元素和行内元素在文档流里都是怎么排布的?
  • 脱离文档流的方式都有哪些?它们有什么不同?
  • 文档排布的时候,各种定位方式的元素排布顺序是怎么样的?先排什么后排什么?
  • z-index 属性是不是可以随意使用,有什么需要注意的么?

二、CSS 选择器

第二个比较大的块就是介绍了 CSS 选择器。从最基础的基本选择器,到组合选择器,还有最后比较特殊的伪类和伪元素选择器。这部分对选择器的介绍比较细致,同学们要尽量去理解。通过下面的问题,大家试试自己对选择器掌握了多少。

  • 为什么 ID 选择器在 CSS 中不太常用?
  • 有没有用过属性选择器,[attr] 和 [attr=xxx] 有什么区别?[attr|=xxx] 和 [attr^=xxx] 都是匹配以 xxx 开头的元素,这两个有什么不同?
  • 后代选择器和子元素选择器在使用上有什么不同?两种选择器一般都在什么场景下应用?
  • 可以选择兄弟元素的选择器都有哪些?它们有什么区别?
  • 可以用什么选择器来选择和某个元素同级的所有兄弟元素?
  • 有没有了解过交集选择器和并集选择器的概念?这两种选择器通常在什么场景下应用?
  • 有没有用过 nth-child 这个选择器,假如我想让一个表格的各行背景色用灰色和白色互相交替,该怎么做?
  • “:after” 和 “::after”这两种选择器有什么不同?

三、页面渲染机制

这部分是 2-6 和 2-7 里的内容,内容里的重点是浏览器渲染的过程,而对加载的过程讲解的比较少。在这部分里,同学们要弄清楚页面的渲染机制,包括页面生成的全过程,DOM 树和 CSSOM 树的构建过程,页面的布局和绘制的过程,以及最后提到的重排和重绘两种机制的原理。这些内容基本都是面试里的必考题,对我们理解其他的概念也至关重要,需要重视。下面来看看这一部分可能会出现的面试题。

  • JS 文件和 CSS 文件的加载过程有什么不同?通常在页面里怎么安排这两种类型文件的位置?为什么?
  • 分别说下 DOM 树、CSSOM 树和渲染树这几种模型的特点,它们之间有什么联系?
  • 构建 DOM 树的时候,会用什么方式来建这棵树(深度优先还是广度优先)?为什么要这么做?
  • 什么是样式的继承?是不是所有样式都可以被子元素继承?
  • 渲染树和 DOM 树结构很相似,这两种树的区别在哪?
  • 知道什么是样式优先级么?怎么比较两条样式的优先级关系?
  • 重排和重绘这两种动作会在什么情况下被触发?这两种动作哪个对资源的消耗比较大?
  • 怎样减少重排的操作?

四、屏幕适配方案

在第 8 节讲了常用的几种屏幕适配方式,在讲适配之前为了铺垫,还介绍了 CSS 里一些常用的单位。这一节可以出下面这些面试题。

  • 为什么编程时用的像素单位不直接使用物理像素?
  • 什么是逻辑像素,它和物理像素间有什么关系?
  • 既然一般手机上的逻辑像素也就是三四百 px,为什么要用到 1080 像素甚至更大宽度的设计稿?
  • “em” 和 “rem” 这两种相对单位有什么不同?
  • 你开发页面的时候有没有做过屏幕适配,一般都是怎么做的?
  • PC 端和移动端一般都用什么方式进行屏幕适配?
  • 谈一下什么是弹性布局,它都有什么优缺点?

五、CSS 规范

最后一部分就是给出了 CSS 的开发规范。包括文件引用规范、选择器的规范、属性的规范、注释的规范以及最后介绍的 CSS-Reset。这一部分通常会被问到如下问题。

  • 为什么要有代码规范?
  • 你平时都是怎么写代码的,会遵从哪些规范?举几个例子。
  • 有哪些好的编程习惯可以加快代码的运行速度?
  • 资源消耗比较大的样式都有哪些?举几个例子。
  • 什么是 CSS-Reset?为什么要做 CSS-Reset?
  • 怎么安排 CSS-Reset 的文件和其他 CSS 文件的位置?为什么这么做?

上面这些就是按内容块提出的一些问题,有的问题会从另外的角度来考察同学们对这章内容的理解。同学们如果能把这些问题都回答上来,那么这一章的学习算是过关了。最后奉上这一章整体的章节结构:

图片描述
希望同学们把这一章的内容多看两遍,有些需要扩展的地方多查多看,争取按着结构图的提示就能想起来每一块都讲了什么内容。我们这一章的内容就到这里,下一章就要开始要进入实战了。听我号令,准备好家伙,我们就要开始写代码了!

}
立即订阅 ¥ 78.00

你正在阅读课程试读内容,订阅后解锁课程全部内容

千学不如一看,千看不如一练

手机
阅读

扫一扫 手机阅读

手把手带你打造自己的UI样式库
立即订阅 ¥ 78.00

举报

0/150
提交
取消