深入学习CSS进阶（一） | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第2天！

本期重新打卡学习CSS进阶（一）部分，进行查漏补缺

1. 选择器权重

• 内联 - 1000

• id - 100

• class - 10， 伪类 - 10，属性 - 10

• 标签 - 1， 伪元素 - 1

• 相邻兄弟选择器 - 0，子选择器 - 0，后代选择器 - 0，通配选择器 - 0

2. 选择器特异度

特异度判定标准（按选择器权重理解）

#(id) -------- .(类、伪类) -------- E(元素、伪元素)

1. #nav .list li a:link
2. .hd ul .links a

如上述例子

(1)中 => id选择器数量为1，（伪）类选择器数量为2（.link, :link），（伪）元素选择器数量为2（li, a） ===> 特异度为 122

(2)中 => id选择器数量为0，（伪）类选择器数量为2（.hd, .links），（伪）元素选择器数量为2（ul, a） ===> 特异度为 22

END: 所以(1)的优先级高于(2)

3. CSS中可继承与不可继承属性

本点内容来源于网络

一、无继承性的属性

1. display：规定元素应该生成的框的类型
2. 文本属性：

• vertical-align：垂直文本对齐
• text-decoration：规定添加到文本的装饰
• text-shadow：文本阴影效果
• white-space：空白符的处理
• unicode-bidi：设置文本的方向

3. 盒子模型的属性：width、height、margin、border、padding
4. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
5. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6. 生成内容属性：content、counter-reset、counter-increment
7. 轮廓样式属性：outline-style、outline-width、outline-color、outline
8. 页面样式属性：size、page-break-before、page-break-after
9. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1. 字体系列属性

• font-family：字体系列
• font-weight：字体的粗细
• font-size：字体的大小
• font-style：字体的风格

2. 文本系列属性

• text-indent：文本缩进
• text-align：文本水平对齐
• line-height：行高
• word-spacing：单词之间的间距
• letter-spacing：中文或者字母之间的间距
• text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
• color：文本颜色

3. 元素可见性

• visibility：控制元素显示隐藏

4. 列表布局属性

• list-style：列表风格，包括list-style-type、list-style-image等

5. 光标属性

• cursor：光标显示为何种形态

对于不可继承的属性可以通过加入inherit进行显式继承

4. CSS求值过程

1. 【DOM树】 + 【样式规则】 👉 浏览器对HTML解析成DOM树，把样式搜集起来成为样式规则

2. 【filtering】 👉 对应用到这个页面的规则如下条件进行筛选：选择器匹配、属性有效、符合当前的media等

• 在此阶段可以获得一个声明值(Declared Values)，即一个元素可能有多个声明值，如p {font-size: 16px;}和p.text {font-size: 1.2em;}

3. 【cascading】 👉 决定用哪个声明值，按照其来源、!important、选择器特异性、书写顺序找出一个优先级最高的属性值

• 在此阶段将得到层叠值(Cascaded Value)，在层叠过程中，优先级最高的那个值如p.text {font-size: 1.2em;}

4. 【defaulting】 👉 如果层叠值为空时，使用继承或初始值

• 在此阶段将得到指定值(Specified Value)，经过cascading和defaulting两个阶段，选择出有且之只有一个指定值

5. 【resolving】 👉 前述的指定值（比如相对值1.2em、图片的相对路径）还不能直接能用来做浏览器渲染，此阶段将相对值转成绝对值

• 在此阶段将得到计算值(Computed Value)，在浏览器不进行实际布局时候的情况下所能得到的最具体的值。比如60%不会在此阶段计算，需要依赖于实际用户浏览器的宽度，将在下一阶段进行

6. 【formatting】 👉 将计算值进一步转换，比如将关键字（initial、inherit）、百分比转成绝对值

• 在此阶段将得到使用值(Used Value)，进行实际布局时能使用的值，不会再有相对值或关键字。但比如400.2px这种精度的值无法直接使用

7. 【constraining】 👉 如将小数像素进行四舍五入转成整数，受限于如max-width限制算出的width的值

8. 【实际值】 👉 渲染时实际生效的值，比如400px