WMH's Blog

概述

书接上文。浏览器进行到这一步，我们已经给 DOM 元素添加了用于展现的 CSS 属性，接下来，浏览器的工作就是确定每一个元素的位置，进入“排版”流程了。

在现代浏览器中，仍然借用了这个概念，但是排版的内容更加复杂，包括文字、图片、图形、表格等等，我们把浏览器确定它们位置的过程，叫作排版。

概述

浏览器使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面的过程。今天我们主要来看阶段二：如何解析请求回来的 HTML 代码，DOM 树又是如何构建的。

总流程

一个 URL 变成一个屏幕上显示的网页的流程如下：

1. 浏览器首先使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面；
2. 把请求回来的 HTML 代码经过解析，构建成 DOM 树；
3. 计算 DOM 树上的 CSS 属性；
4. 最后根据 CSS 属性对元素逐个进行渲染，得到内存中的位图；
5. 一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度；
6. 合成之后，再绘制到界面上。
   阅读全文 »

概述

最常见的颜色相关的属性就是 color 和 backgroud-color。css中颜色表示有一下几种方式：

概述

CSS 中跟动画相关的属性有两个：animation 和 transition。

正常流的行为

我们可以用一句话来描述正常流的排版行为，那就是：依次排列，排不下了换行。

当我们要把正常流中的一个盒或者文字排版，需要分成三种情况处理:

• 当遇到块级盒：排入块级格式化上下文。
• 当遇到行内级盒或者文字：首先尝试排入行内级格式化上下文，如果排不下，那么创建一个行盒，先将行盒排版（行盒是块级，所以到第一种情况），行盒会创建一个行内级格式化上下文。
• 遇到 float 盒：把盒的顶部跟当前行内级上下文上边缘对齐，然后根据 float 的方向把盒的对应边缘对到块级格式化上下文的边缘，之后重排当前行盒。

选择器的优先级

CSS 标准用一个三元组 (a, b, c) 来构成一个复杂选择器的优先级。

id 选择器的数目记为 a；
伪类选择器和 class 选择器的数目记为 b；
伪元素选择器和标签选择器数目记为 c；
“*” 不影响优先级。

CSS 标准建议用一个足够大的进制，获取“ a-b-c ”来表示选择器优先级。

specificity = base * base * a + base * b + c

• 同一优先级的选择器遵循“后面的覆盖前面的”原则
• 行内属性的优先级永远高于 CSS 规则
• !important优先级高于行内属性

简单选择器

css 规则

CSS 的顶层样式表由两种规则组成的规则列表构成，一种被称为 at-rule，也就是 at 规则，另一种是 qualified rule，也就是普通规则。

事件捕获和冒泡

捕获过程是从外向内，冒泡过程是从内向外。

实际上点击事件来自触摸屏或者鼠标，鼠标点击并没有位置信息，但是一般操作系统会根据位移的累积计算出来，跟触摸屏一样，提供一个坐标给浏览器。那么，把这个坐标转换为具体的元素上事件的过程，就是捕获过程了。而冒泡过程，则是符合人类理解逻辑的：当你按电视机开关时，你也按到了电视机。

所以我们可以认为，捕获是计算机处理事件的逻辑，而冒泡是人类处理事件的逻辑。

addEventListener 有三个参数：

事件名称；
事件处理函数
捕获还是冒泡

在现代浏览器中，建议默认不传第三个参数，因为冒泡是符合正常的人类心智模型的，大部分业务开发者不需要关心捕获过程。