这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
CSS是如何工作的呢
首先浏览器会去请求我们的HTML文件，然后开始逐行的解析我们的代码，创建DOM树，然后当解析到CSS的内容的时候，会去加载我们的CSS文件，然后逐行的解析我们的CSS代码，将相关的Style样式也加入到创建的DOM树中的对应的DOM节点身上，浏览器会根据DOM树来渲染页面（注：在样式没有加入到DOM树的时候，浏览器就已经在渲染界面了，并不是等到CSS样式全部加入到DOM树的时候才开始渲染界面） 如果对这个流程还不是很清楚的话可以看下面的这张图片
CSS常见的选择器组合
注意：他们的权重为对应的基础选择器的权重相加，忽略 > ~ + 这种符号。
权重
| 选择器 | 权重 |
|---|---|
| !important | 最高 |
| 内联样式 | 1 0 0 0 |
| id选择器 | 0 1 0 0 |
| 类选择器，伪类选择器（状态伪类选择器， 结构伪类选择器）， 属性选择器 | 0 0 1 0 |
| 标签选择器，伪元素选择器 | 0 0 0 1 |
| 通配符选择器（*），关系选择符(+, ~, >) | 0 0 0 0 |
CSS中的颜色的表示方式
RGB(RGBA)
- R: RED 红色
- G: GRENN 绿色
- B: BLUE 蓝色
- A: ALPHA 透明度 （注：css里面实际上是不透明度，1 表示完全不透明， 0 表示完全透明）
众所周知，颜色是由三原色，红绿黄组成的,所以可以使用rgba(R, G, B, A )这种形式来表示颜色及其透明度
HSL(HSLA)
- H: Hue 色相，如红色，黄色， 取值范围为人肉眼可见的光的波长 0 - 360
- S: Saturation 饱和度，指的是色彩的鲜艳程度，越高越鲜艳，取值范围 0 - 100%
- L: Lightness 亮度，取值范围 0 - 100%
怎么使字体非常好看呢？
使用font-family
使用 Web Fonts
显式继承
我们都知道css有一些属性是不会继承（自动继承）的，但是我们可以使用inherit属性值，强行让他继承父元素。
初始值
可以使用initial属性值，来让属性的值为初始值
CSS求值过程
以以下代码为列
- filtering(过滤)：遍历DOM树和STYLE样式规则，通过选择器匹配，属性有效，符合当前media等来对样式规则进行筛选，使每个DOM元素都有对应的设置的STYLE样式，得到的是声明值（可以有多个）。（对于上面的例子而言，此时p标签得到的声明值就是p { color: red }, div p { color: green }, .father p { color: #66ccff }）
- cascading(层叠): 按照权重选出权重最高的那个声明值作为层叠值，得到的是层叠值（ 对于上面的例子而言，得到的就是 .father p { color: #66ccff } ）
- defaulting(默认化): 当层叠值为空时，使用继承制 or 初始值，得到的是指定值，指定值一定不为空
- resolving(解析)：会将相对值，关键字解析为绝对值，得到的是计算值(不进行布局，就可以得到的最具体的值，此时包括百分比)（比如，会将 em 换算成 px ，相对路径 转换为 绝对路径）
- formating(格式化)：会将相对值，关键字进一步转换为绝对值，得到的是使用值（进行布局才可以得到的绝对值）（比如，会将百分比转换成相应的px）
- constraining(限定)：会根据具体的限定条件得到可以使用的值，得到的为实际值（比如将小数像素转换为整数像素）
IFC
BFC
注意：BFC内的排版规则补充一句，BFC是会计算内部BFC的高度的，而一般块级元素计算高度的时候并不会去计算内部BFC的高度，这也是浮动造成问题的原因所在。
当一个父级盒子内部既有块级盒子子元素，又有行级盒子子元素的时候是怎么处理的呢？
首先明确一点，浏览器是不允许你一个父级盒子里面既有块级盒子又有行级盒子的，所以浏览器实际上会自动用一个块级盒子包裹行级盒子。
