这是我参与「第五届青训营 」笔记创作活动的第2天。
本课重点
- CSS简介
- CSS求值过程
- CSS布局
CSS简介
层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。CSS结构由选择器、声明、属性、属性的值四个部分组成。
CSS求值过程
- 根据DOM树和样式规则进行筛选，通过选择器是否匹配、属性是否有效、是否符合当前meida来进行筛选。
- 得到Declared Values，得到一个元素的可能的0或多个声明值。
- 按照样式来源、是否important、选择器的特异性、书写顺序等来选择优先级最高的属性值，此属性值唯一，称为Cascaded Value。
- 当Cascaded Value为空时，使用继承或初始值。因此一定会有且只有一个Specified Value。
- resolving：对一些相对值和关键字进行转化。某一些计算值的转化会在接下来的formatting步骤中进行。
- constraining：小数像素无法渲染，因此将小数像素转化为整数。以及max-width限制时选择什么值。
CSS布局
布局是为了确定内容的大小和位置。可以根据元素、容器、兄弟节点和内容等信息来计算。CSS布局有常规流、浮动和绝对定位三种布局方式。
常规流
常规流中一般有行级、块级、表格布局、FireBox和Gird布局等方式。比如display有block、inline、inline-block、none等属性，对应了块级排版、行级排版等排版格式。行级和块级都有相应的排版规则。
行级、块级布局
CSS的基础为Box模型，Box中有border，padding，margin，width和height等元素。
height和width的计算：
根据选取模型不同分为content-box和border-box，content-box以content部分的长与宽，border-box以border部分的长与宽。一般来说用border-box的比较多。
margin collapse现象：
即外边距折叠，发生在垂直方向上，垂直方向上相邻两元素的margin相遇时不会相加，而是选择margin较大的一方的值作为间隔margin。
行级元素内部出现块级元素时，系统会自动生成块级元素包裹行级元素。如下图所示：
FlexBox布局
FlexBox是一种一维的布局模型，可以控制子级盒子的摆放流向、摆放顺序、盒子的宽度和高度、水平和垂直方向的对齐和是否允许拆行等排版。是进行布局时使用较多的一种方式。display: flex即可使用flexbox布局。
使用flex布局时有主轴和侧轴两个概念，主轴方向即元素延伸的方向，侧轴垂直于主轴。flexibility属性可以设置子项的弹性，当容器有剩余空间时，会伸展；容器空间不足时会收缩。flex-grow的数值表示元素的弹性大小，同理还有flex-shrink和flex-basis。
Grid布局
Grid是一种二维布局模型。display: grid即可使用grid布局。具体使用方法可见MDN文档。
绝对定位
绝对定位利用position属性，包括了static、relative、absolute、fixed四个值。
