这是我参与「第五届青训营」伴学笔记创作活动的第 2 天
#### CSS是如何工作的
首先加载HTML 然后解析HTML 在解析HTML后同时开始加载CSS，解析CSS和创建DOM树；经过解析的CSS添加样式到DOM节点，最终呈现页面
选择器的分类
通配选择器
标签选择器
id选择器
类选择器
属性选择器 [某些属性] [disabled]{} input[type="password"]{} a[href^="#"]{} 表示名称里含有# a[href$=".jpg"] 选择后缀
伪类选择器 a:link{}通过一个标签的不同状态来选择样式 a:first-child{}选择不同的子元素
颜色的表示方式
1.RGB 2.HSL 3.直接键入颜色 4.alpha不透明度
字体 font-family
serif 衬线体 -宋体
Sans-Serif无衬线体 -微软雅黑
Curisve 手写体 -楷体
Fantasy -Papyrus
Monospace 等宽字体 -Consolas
使用Web Fonts @font-face{} 其从浏览器上下载字体 可能会导致性能损失
white-space
[white-space - CSS（层叠样式表） | MDN (mozilla.org)]
调试CSS
右键点击页面，选择检查 ctrl+shift+i
CSS进阶
CSS继承
若子元素无指定显式，则继承父元素的属性
显式继承
子元素指定显式
初始值
CSS中，每个属性都有一个初始值 background-color的初始值为 transparent margin-left的初始值为 0 可以使用initial关键字显式重置为初始值 background-color:initial
filitering 对应用到该页面的规则用选择器匹配，属性有效，符合当前media等条件进行筛选
-> 层叠值 Cascaded value 在层叠过程中最高优先级的值
defaulting 当层叠值为空的时候，使用继承或初始值
-> 指定值 Specified Value，经过cascading和defaulting 之后，保证指定值一定不为空
resolving 相对值或者关键字转化为绝对值（em -> px/相对路径 -> 绝对路径）
-> 计算值 Computed Value 一般来说，浏览器在不进行实际布局的情况下，所能得到的最具体的值，比如60%
formatting 将计算值进一步转换（关键字，百分比等都转为绝对值）
-> 使用值 Used Value 进行实际布局时使用的值，不在会有相对值或关键字（比如：400.2px） constrain 将小数值转换为整数值
CSS布局
- 确定内容的大小和内容的算法
- 依据元素 容器 兄弟节点和内容等信息来计算
常规流:行级 块级 表格布局 FlexBox Grid布局
盒模型
width height 指定的均为content box 高度 auto的取值由内容计算而来 百分数相对于容器的content box 高度（容器有指定高度时生效）
padding 指定内边框的宽度
border 边框的粗细 样式 宽度
margin 指定外边距宽度 可使用margin:auto水平居中
行级排版上下文
- lnline Formatting Context(IFC)
- 只包含行级盒子的容器会创建一个IFC
IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动元素
块级排版上下文
-
Block Formatting Context(BFC)
-
默写容器会创建换一个BFC
- 根元素
- 浮动 绝对定位 inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display：flow-root;
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC盒子内的margin不会与外面的合并
- BFC不会和浮动元素重叠
关于flex布局 [flex 布局的基本概念 - CSS（层叠样式表） | MDN (mozilla.org)]
关于grid布局 [grid - CSS（层叠样式表） | MDN (mozilla.org)]
浮动 [float - CSS（层叠样式表） | MDN (mozilla.org)]
由于flex布局和grid布局的存在 float现在只用于文字环绕效果
定位 [position - CSS（层叠样式表） | MDN (mozilla.org)]
