为什么CSS这么难学?css核心知识点攻坚指南

为什么CSS这么难学?css核心知识点攻坚指南

一、什么是CSS?

层叠样式表(英文全称：Cascading Style Sheets)是一门专门用来描述 html/xml 等文件样式的一门语言。

简而言之，我们可以通过编写css来描述当前文档的样式规则，让页面的展示得以符合我们的预期。

css难学吗?其实掌握了它的工作原理和核心特征，css就不再变得难学。

二、CSS如何工作?

如果你已经学习了客户端 JavaScript (原生js+DOM+BOM)，你可能对"dom(文档对象模型，用来描述整个文档也就是web结构)" 这个概念有一定了解，包括它相关的一些API。

而在web中除了dom对象之外，还有一个css对象模型——即CSSOM，我们将其用来描述当前文档的css规则树。

实际上，在浏览器中，我们所写的页面的最终渲染形态——也就是展示在用户面前的视图，就受到了文档(DOM结构)和CSSOM两者的控制,流程大体如下:

浏览器引擎会自上到下去解读html，通过html的元信息(META标签的内容)来决定读取html的规则(注: 浏览器引擎一般由html解释器、cssom解释器、js引擎等多个部件组成，其中，html解释器用来解析html文档);

当引擎读取到dom标签时，会去构建形成视图的dom-tree(你可以发现，我们所写的html文档本身就是一种树结构语法规则)，dom树自带默认的样式规则。

当引擎读取到style标签或者通过link加载css样式时，会通过cssom解释器来解析我们所写的css，将其合并近默认的css规则树中;

在上述过程中，视图 = dom-tree + cssom-tree。就是说dom树和css规则树会合并成我们的视图渲染的依据。

把4拆开来详细点讲，也就是说如何合并?首先，引擎基于已确定的css规则，会给我们html中的dom分配好即将在屏幕中展示的大小(空间,受width，height等属性影响)和位置(坐标，受margin等属性影响)，截止到这一步，html和css中控制大小和位置的规则会结合生成一个称之为layout-tree的树形结构，这个结构用来描述我们的dom最终渲染的位置。 (注意，我们所说的回流，其实就是重复构建layout-tree的过程!)

接下来，根据cssom中的元素颜色、背景等规则(受color、background等属性影响)，在layout树的基础上，生成render-tree，也就是我们所说的渲染树，用来描述我们最终的整个视图最终的表现。引擎会根据render-tree来调用电脑的操作系统所提供的api，将其绘制在屏幕上。(这个构建render-tree的过程就是我们所说的"绘制"，重复这个过程，也就是我们所说的重绘)。

扩展补充: 屏幕是硬件，我们的操作系统可以通过指令来控制硬件工作。操作系统对上层开放了接口，我们的软件比如浏览器就可以通过调用这些接口来驱使硬件工作。

Q: 那么问题来了——你知道为什么我们一般把css规则写在html文档中的上面吗?

如果你读懂了上述的流程，那么其实很简单就思考出了答案：

A:

css如果写在dom的下面，那么一开始引擎读取dom标签的时候，会按照dom的默认规则来生成布局树(layout-tree)和渲染树(render-tree)。接着引擎继续工作去解析写在下面的css，从而更新css规则树，然后再次构建了新的laytou树(回流)和渲染树(重绘)。

如果视图非常庞大，我们可能会肉眼发现一开始渲染出的视图看起来是那种没有样式(只有默认样式)的视图，接着过了一丢丢时间，页面好像重新渲染了一下，变得有样式了。

而我们把css写在dom的上面，那么浏览器就会先构建cssom-tree，然后再读取dom构建dom-tree，两者集合形成布局树和渲染树，那么就会一次渲染成功，避免了回流带来的糟糕体验，有效提升渲染性能。

三、什么是CSS核心特征?

css核心特征就是我们必须要掌握的css的核心构成知识，掌握了这些核心点，就形成了我们的css知识体系。

在这里，我们列举出以下css必备的知识，并期望你在当下或者说未来，能够掌握它们，得以成为一个强大的前端开发工程师。

选择器及其权重

css提供了各种目标选择器，来告诉浏览器规则是为哪些dom所设置。这是我们必须掌握的最基本的css知识

选择器有对应的权重级别，并且可以通过层级组合方式进行权重的累加。当我们对一个dom描述了多个同样属性的规则时，权重值就是对应规则的优先级。

布局规则属性(layout相关的属性,行与块，盒模型等)、文档层级、适配

其实我们打开一个页面，视图无非是各种dom构成。如果我们从宏观的角度一层一层进行拆解，无非是大盒子里通过某种布局规则嵌套了多个小盒子，而小盒子里又通过某种布局规则来嵌套了多个小小盒子……如何设置布局规则，掌握布局规则相关的属性(比如弹性盒，栅格等)，是学习css的第一要素。

页面中，每个文档层级之间互不影响(比如定位引发的脱离文档流)。了解文档层级的概念，可以更有效的去构建视图样式。

适配作为一个布局相关的重要点，比如同样宽不同高的手机，如何展示同一个页面?适配相关的属性也是重中之重。

表现属性(绘制属性)

对于表现属性，比如color，background，可以多做认知。通过大量的页面样式编写来逐个熟悉它们。

观望css新特性

css属性是很难掌握全的，因为css的标准也不断再提出新的属性。

多了解css版本变化带来的一些比较重要的新特性(比如css3的css变量等)，是我们css技能不断得以提升的有效方法。

四、如何衡量CSS学的如何?

如果说给定一个页面，当我们一眼扫过页面的时候，发现整个页面的渲染实现似乎没有什么难点，我们能够宏观的将其进行一层层的布局拆解，并能对应提出一种或者多种具体的解决方案(比如利用弹性盒、栅格等具体的一些属性)，那么css的修行算是达成了基本目标(两周学习时间算是比较冗余)。

如果给出一个具体的UI稿(稿中给定一些数据，比如盒子的长宽值等)，我们能够通过html+css做到99%以上的还原度，那么css的修行算是达成了大成阶段(三、四周学习时间算是比较冗余)，基本能够解决现实工作中的绝大多数场景。

五、总结

只要掌握了css的工作原理，遵循css核心特征分门别类地去学习它，会发现css的学习之路，将不再那么难。

*陆荣涛前端学习交流Q群858752519
加群备注：CSDN推荐