这是我参与 [第五届青训营] 笔记创作活动的第二天。

CSS概述

Cascading Style sheets（层叠样式表）
    用来定义页面元素的样式；
        设置字体和颜色；
        设置位置和大小；
        添加动画效果；
        
页面使用CSS
    外链、嵌入、内联；

CSS工作原理

加载HTML -> 解析HTML -> 创建DOM树 -> 展示页面；
在解析HTML的同时会加载CSS，之后对加载的CSS进行解析，在创建DOM树的时候添加样式到DOM节点；

CSS选择器

通配选择器、标签选择器、类选择器、id选择器、属性选择器、伪类选择器；

伪类选择器
    不基于标签和属性定位元素；
        状态伪类；
        结构性伪类；
        
组合
    直接组合 -- AB
    后代组合 -- A B
    亲子组合 -- A>B
    兄弟选择器 -- A~B
    相邻选择器 -- A+B

样式继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值；

显式继承
    某些属性不可继承，可以使用通配选择器设置该属性为"inherit"，从而实现继承；
    
初始值
    CSS中，每个属性都有一个初始值；
        background-color的初始值为transparent；
        margin-left的初始值为0；
    可以使用initial关键字显式重置为初始值；

CSS计算过程

DOM树 + 样式规则 --> filtering
    对应用到该页面的规则用以下条件进行匹配；
        选择器匹配、属性有效、符合当前media等；
        
filtering --声明值--> cascading
    Declared Values，一个元素的某属性可能有0到多个声明值；
    按照来源、!important、选择器特异性、书写顺序等选择出优先级最高的一个属性值；
    
cascading --层叠值--> dafaulting
    Cascaded Value，在层叠过程中，赢得优先级比赛的那个值；
    当层叠值为空时，使用继承或初始值；
    
dafaulting --指定值--> resolving
    Specified Value，经过cascading和defaulting之后保证指定值一定不为空；
    将一些相对值或者关键字转化为绝对值；
    
resolving --计算值--> formatting
    Computed Value，一般来说是，浏览器会在不进行实际布局的情况下，所能得到的最具体的值；
    将计算值进一步转换，比如关键字、百分比等都转为绝对值；
    
formatting --使用值--> constraining
    Used Value，进行实际布局时使用的值，不会再有相对值或者关键字；
    将小数像素转换为整数；
    
constraining --> 实际值（渲染时实际生效的值）

布局

确定内容的大小和位置的算法；
依据元素、容器、兄弟节点和内容等信息来计算；

常规流、浮动、绝对定位；
常规流
    行级、块级、表格布局、FlexBox、Grid布局等；
    
盒模型；

CSS三角；

块级元素；

行级元素；

总结

关于CSS的知识，在应用方面障碍不大，但在理论知识方面还需要继续加加强，对于笔记中并未详细展开的知识点还需要进一步巩固牢记。