这是我参与第四届青训营笔记创作活动的第一天

CSS HTML中样式引入有三种方法：外链，内嵌，内联
在解析HTML的同时，会加载并解析CSS，然后和dom树进行样式渲染，最后展示界面
通过各种选择器来获取特定的dom节点来给其设置样式
属性选择器 （标签名）[属性名]

伪类 可分为 状态性伪类，结构性伪类
状态性伪类 dom节点处于某种状态
举例 a：hover a：active ：focus
结构性伪类 会根据dom节点在dom树中的位置来选中dom节点
例子：第一个孩子 li：first-child
颜色表示方法：RGB和HSL
alpha透明度（css中alpha=1为完全不透明）

字体

font-family
font-size
font-weight 范围100—900，需要字体支持才能显示字重 line-height行高一般都需要设置，默认行高不利于阅读 两条基准线的距离

深入CSS

选择器优先级，特异度，选择器越特殊，优先级最高
子元素会继承父元素的可继承属性，与盒模型相关的属性不可继承，文字相关的属性可继承
显示继承 使用通配选择器*，给一个属性设置为inherit，可显示继承父元素的属性值

CSS求值过程 html解析成dom树，收集样式规则（样式组成的集合）；
然后对页面进行规则筛选（选择器是否匹配，属性有效，符合当前的media）；
然后对样式属性的值进行声明值设置；
然后cascading：按照来源，important，选择器优先级，先后顺序，找出优先级最高的一个属性值（cascade value 层叠值）；
然后可能筛选出的层叠值是空，则取默认值；
然后求计算值，比如em转换为具体像素，相对路径转绝对路径，获得计算值；
计算值进过formatting后，转换百分比，关键字那些为绝对值，形成使用值；
在使用值前提下，将小数像素点转为整数，400.2px转为400px
得到实际值，最后使用属性值进行渲染。

布局技术

常规流，浮动，绝对定位
如果子元素高度为百分比，其实依赖于父容器的高度的基础上，需要父容器指定高度，如果父容器高度为auto，则有子容器撑开，子容器需要自己指定高度，若依旧为百分比，则会循环无效依赖。