这是我参与「第四届青训营 」笔记创作活动的第3天
一、CSS规则生效顺序
1. 选择器特异度
特殊的会覆盖普通的。
2. 继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值。
3. 显示继承
某些属性不能从父级继承，但是还要显示和父级相同的话，用inherit定义。
4. 初始值
- CSS中，每个属性都有一个初始值
background-color的初始值为transparent
margin-left的初始值为0
- 可以使用Initial关键字显示重置为初始值
background-color : initial
二、CSS求值过程
首先DOM树中链接样式规则，接着进入filtering对应用到该页面的规则可用选择器匹配、属性有效、符合当前media等进行筛选；一个元素的某个属性可能有0到对个声明值（declared values），例如p {font-size : 16px}和p.text {font-size : 1.2em}；接下来进入层叠过程（cascading），按照来源、limportant、选择器特异性、书写顺序等选出优先级最高的一个属性值，即层叠值（cascaded value），例如.1.2em；然后进入defaulting过程，当层叠值为空的时候继承或为初始值，经过cascading和defaulting之后，保证指定值（specified value）一定不为空；经过转化（resolving）将一些相对值或者关键字转化为绝对值，例如em转化为px，相对路径转为绝对路径，得到计算值（computed value）一般的，浏览器会在不进行实际布局的情况下所能得到的最具体的值；之后将计算值进一步转换（formatting），例如关键字、百分比等都转为绝对值，得到使用值（used value）进行实际布局时使用的值，不会再有相对值或关键字；之后经过constraining将小数像素值转化为整数，得到渲染时实际生效的值，即实际值。
三、盒子模型
1. 布局（layout）：一维的
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
2. 布局相关技术
- 常规流（文档流）
行级
块级
表格布局
Flex Box
Grid布局
- 浮动
- 绝对定位
3. 标准盒子模型
3.1 content 内容：盒子的内容，显示文本和图像。
- width：
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对容器的content box宽度
- height：
- 指定content box高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对容器的content box高度
- 容器由指定的高度时，百分数才生效
3.2 padding内边距：清楚内容周围的区域，内边距是透明的。
- 指定元素四个方向的内边
- 百分数相对于容器宽度
3.3 border 边框：围绕在内边距和内容外的边框，有样式、粗细和颜色。
- 三种属性：border-width、border-style、border-color
- 四个方向：border-top、border-right、border-bottom、border-left
3.4 margin 外边距：清除边框外的区域，外边距是透明的。
- 指定元素四个方向的外边距
- 取值为长度、百分数、auto
- 百分数相对于容器宽度
4. 盒子模型的布局规则
4.1块级和行级
块级上下排列，行级左右排列。行级上下文会根据内容长度自动换行，但遇到长单词无法拆分换行时，可以使用overflow-wrap : break-word ; 对长单词进行拆分换行。
4.2块级和行级的区别
在常规流中，一个子集的盒子只能都是块级的盒子或者都是行级的盒子。如果一个盒子里既有块级的盒子又有行级的盒子，这是浏览器会创建两个匿名的（不是在html中写的，DOM树中看不到）块级盒子包裹文字，进行排版。
5. 布局grid：二维的
- display：grid使元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置每一个子项占哪些行/列
5.1划分网格
grid-template-columns:100px 100px 200px;
grid-template-rows:100px 100px
grid-template-columns:30% 30% auto;
grid-template-rows:100px auto
grid-template-columns:100px 1fr 1fr;
grid-template-rows:100px 1fr
5.2网格线：可以通过线的标号表示线
总结与思考
通过深入CSS的学习，更加深入的理解了CSS，对CSS的学习保持不断持续的学习，CSS的新特性还在不断出现，反思自己了解的CSS的皮毛就搁置的行为，今后要像老师说的那样保持好奇心，善用浏览器的开发者工具，充分利用MDN和W3C CSS规范，真正学扎实CSS。
