CSS在作为Web三剑客之一，不言而喻，很重要。这里就简单写一些内容。
选择器
- 基本选择器就是最基础的选择器。
分别是元素选择器( h1{} )，类选择器( .context{ } ).id选择器( #context{ } ),通配符选择器( *{ } );
- 组合选择器（也叫关系选择器） 就是将基本选择器组合或者添加某一些符号进行筛选拥有新功能
后代选择器：这个选择器是选择某个元素内部的指定的子元素。无论多深。.context h1{} 这里指定是在class名为context子元素为h1进行css
子元素选择器：某个元素直接的子元素 .context>.headcontext{}
相邻兄弟选择器：某个元素紧接着的兄弟元素 .headcontext + .bottomcontext(有效的是这个){}
通用兄弟选择器：某个元素后面所有的兄弟元素 h1~p{} 这个里是h1后面的所有p元素
- 属性选择器 用于根据元素的属性来选中元素
基本属性选择器 input[type="text"]{} 选中所有type="text" 的input元素
部分匹配属性选择器
[attr^="value"] 选择 attr 属性值以 value 开头的元素。
[attr$="value"] 选择 attr 属性值以 value 结尾的元素。
[attr*="value"] 选择 attr 属性值中包含 value 的元素。
- 伪类选择器 这个一般是用于选中元素的某些状态，或者特定条件下的元素
:hover 鼠标悬浮时
:first-child 选中父元素的第一个子元素。 li:first-child{} 在ul 里面的第一个li
等等
- 伪元素选择器 通常是:: 开头
::before 元素的内容之前插入内容。p::before { content: "★ "; color: gold; }每个 <p> 标签内容前面插入一个星号。
等等
css求值
由于浏览器为了布局或者渲染页面，首先去寻找每一个属性所对应的CSS值。
流程：第一步（filtering）先筛选规则，去判断筛选规则是否符合当前的media等条件。筛选出来规则以组的形式显示，叫做声明值(Declared Values)。可能是0个或多个声明值。
由于可能存在多个声明值，它会出现优先级的显示方式。这个过程叫 cascading。 其优先级按来源，!important，选择器特异性，书写顺序等选出优先级最高的一个属性值。有这个选出来的值叫层叠值(Cascaded Value)。
若层叠值为空的时候，会使用继承或初始值。这个值叫指定值(Specified Value)。这个过程叫 defaulting。
在经历过 cascading 和 defaulting 之后，保证指定值一定不为空。这个指定值不会直接被渲染。会进一步去转换。这个过程叫 resolving 。得到的值是叫计算值 (Computed Value)。这个计算值中有一些需要进行 formatting 步骤。有一些不用。
fomatting 将计算值进一步转换，比如关键字，百分比等都转为绝对值。得到值叫使用值（Used Value）。这个使用值可能会出现小数像素值，这是要经过 constraining 将小数转成整数。之后就得到了实际值
css盒模型 - 行级
概念：行级元素可以和其它行级盒子放在同一行或才开成多行。 在盒模型中的width。height不适用
常见标签： body,article,div,main,section.h1~6,p,ul,li等 css属性 display:inline
IFC是行级排版。只包含行级盒子的容器会创建一个IFC。
IFC的排版规则：盒子在一行内水平摆放，行放不下是，换行显示，text-align决定一行内盒子的水平对齐， vertical-align 决定一个盒子在行内的垂直对齐，避开浮动元素
css盒模型 - 块级
概念：不能和其它盒子并列摆放。
常见标签：span,em,strong,cite等 css属性 display:inline
BFC是块级排版。某些容器会创建一个BFC。例如：根元素，浮动，绝对定位，inline-block，Flex子项和Grid子项，overflow值不是visible的块盒，display：flow-root;
BFC的排版规则：盒子从上到下摆放，垂直margin合并
