这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
重点内容
1. CSS 代码构成
2. CSS 使用方法
3. CSS 流程之选择器组、文本渲染
4. 调试 CSS
5. CSS 选择器的特异度
6. CSS 继承
7. CSS 求值过程解析
8. CSS 布局方式及相关技术
9. CSS 盒模型 - 行级
10. CSS 盒模型 - 块级
详细知识点介绍
1.CSS是什么
Cascading Style Sheets 层叠样式表
是一种用来表现HTML或XML等文件样式的计算机语言。
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
2.在页面中使用CSS
CSS的使用方式分为三种，分别为：外链、嵌入、内联。
- 外链——在html文件中，使用link标签引入CSS文件
<link rel="stylesheet" href="xxx.css">
- 嵌入——在html文件中，使用style标签直接包裹CSS代码
<style>
body {
width: 100px;
height: 100px;
}
</style>
- 内联——在html文件中，通过标签的style属性使用CSS代码
<p style="margin:1em 0">Example Content</p>
3.CSS是如何工作的
-
浏览器载入HTML文件。
-
将HTML文件转化成一个DOM，DOM是文件在计算机内存中的表现形式。
-
接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。
-
浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。 浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
-
上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
-
网页展示在屏幕上。
4.选择器
选择器用于找出页面中的元素
以便给他们设置样式
1.按照标签名、类名或 id；
2.按照属性；
3.按照DOM树中的位置
- 统配选择器
选中文件中所有元素
- 标签选择器
选中文件中所有该标签的元素
- id选择器
选中文件中id属性为该id名的所有元素
- 类选择器
选中文件中class属性为该类名的所有元素
- 属性选择器
选择属性值、标签名相符的所有元素
- 伪类选择器
状态类伪类：元素在特定的状态下被选中
链接：link、visited、hover、active；
输入框：checked、disabled、enabled、focus、invalid；
结构类伪类：元素在DOM树中的位置相关
如：first-child、last-child等。
- 组合
4.颜色
在CSS中颜色使用三种方式：RGB模型、HSL模型、关键字。
5.字体
font-family: "Gill Sans Extrabold", sans-serif;
字体族为了兼容性问题一般需要设置多个，匹配规则按照从前往后的方式进行匹配。
1. 字体列表最后写上通用字体族；
2. 英文字体放在中文字体前面；
使用web font，需要使用@font-face，但是会增加系统的开销
字体大小：font-size，其取值有三种方式，分别为关键字、长度单位（px、em）、百分比。
当字体使用百分比时是相对父元素字体大小的。
字体粗细：font-weight，可以取数字值（100-900），也可以使用关键字 normal（400）、bold（700）。
行高：line-height，表示两行文字之间baseline的距离。
对齐方式：text-align
文本装饰：text-decoration
空白：white-space，取值
-
normal -
连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子」时是必要。
-
nowrap -
和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
-
pre -
连续的空白符会被保留。在遇到换行符时才会换行。
-
pre-wrap -
连续的空白符会被保留。在遇到换行符，或者需要为了填充「行框盒子」时才会换行。
-
pre-line -
连续的空白符会被合并。在遇到换行符，或者需要为了填充「行框盒子」时会换行。
6.CSS的调试
7.选择器特异度
第一个特异度：122；第二个特异度：22
8.继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
- 一般和文字相关的属性会被继承
- 一般和盒模型相关的属性不会被继承 使用关键字inherit可以继承
9.CSS求值过程
10.布局是什么
1.确定内容的大小和位置的算法 2.依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
布局常用的相关技术有三种，常规流、浮动、绝对定位。
11.盒模型
box-sizing: content-box
12.行级排版上下文 - IFC
Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*
13.块级排版上下文 - BFC
Block Formatting Context (BFC)
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display: flow-root;
BFC 内的排版规则
- 盒子从上到下摆放
- 垂直 margin 合并（塌陷现象）
- BFC 内盒子的 margin 不会与外面的合并
- BFC 不会和浮动元素重叠
14.Flex 布局
它可以控制子级盒子的：
- 摆放的流向 ( → ← ↑ ↓ )
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
