这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

本堂课重点内容

本节课重点讲述了CSS求值过程解析、CSS常见布局方式及相关技术。

CSS求值过程解析

CSS值的计算：遍历所有元素和元素的属性值

第一步（filtering）：过滤、筛选；筛选条件：选择器匹配、属性有效、符合当前media；
第二步（cascading）：比较声明值（Declared Values）的优先级——按照来源、!important、选择器特异性（权重）、书写顺序等；
第三步（defaulting）：获取层叠值（Cascaded Value），即赢得优先级比较的值；当层叠值为空时，使用继承或默认值；
第四步（resolving）：获取指定值（Specified Value），经过第二、三步之后，保证指定值不为空；将一些相对值或者关键字转化成绝对值，如em→px，相对路径→绝对路径；
第五步（formatting）：获取计算值（Computed Value）；将计算值进一步转换，如关键字、百分比等转换为绝对值；
第六步（constraining）：获取使用值（Used Value），即进行实际布局时使用的值，不会再有相对值或者关键字；将小数像素值转为整数；
第七步：获取实际值。

CSS常见布局方式

什么是布局

把网页元素比如文字、图片等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

CSS常规流布局

1.行级排版上下文（IFC-Inline Formatting Context）：

只包含行级盒子（display:inline）的容器会创建一个IFC。

IFC排版规则：

盒子在一行内水平摆放
一行放不下时，换行显示
text-align决定一行内盒子的水平对齐方式
vertical-align决定一个盒子在行内的垂直对齐方式
注意避开浮动（float）元素

2.块级排版上下文（BFC-Block Formatting Context）

会创建BFC的容器：根元素；浮动、绝对定位元素、inline-block；Flex子项和Grid子项；overflow值非visible；display:flow-root。

BFC排版规则：

盒子从上到下摆放
垂直margin不会与外面的合并
BFC内盒子的margin不会与外面的合并
BFC不会与浮动元素重叠

3.Flex排版上下文

对元素设置flex属性可以控制子级盒子的：摆放流向、摆放顺序、盒子宽高、水平与垂直方向对齐方式、是否允许折行。

Flexibility：设置子项的弹性，有剩余空间则伸展；空间不够则收缩

flex-grow 空间剩余时的伸展能力
flex-shrink 空间不够时的收缩能力
flex-basis 没有伸展或者收缩时的基础长度
flex:1即flex-grow:1;flex-shrink:1;flex-basis:auto;

4.Grid排版上下文

Grid网格布局

使用grid-template相关属性将容器划分为网格
设置每一个子项所占行列
columns表示列，rows表示行

CSS其他布局

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。文档流是指CSS定义HTML元素从上到下、从左到右的排列的位置。

浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

在CSS中，通过float属性来定义浮动，属性值有left/right/none。

清除浮动的方式：

对浮动元素的父级设置高度
设置clear属性
对父级元素设置overflow:hidden样式
使用伪元素清除浮动

.afterfix:after{
    display: block;
    content: "";
    clear: both;
}

定位

position的属性值：

static 默认值，自动定位
relative 相对位置，相对于其原文档流的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口是固定位置
sticky 粘性定位，可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位

绝对定位和固定定位会脱离正常文档流

个人总结

第一次详细了解了CSS值的计算流程，明白了其中原理，感觉很不错。网页布局就是把网页元素（文字、图片等），放入盒子里面，然后利用CSS摆放盒子的过程。选择合适的布局方式往往会带来事半功倍的效果。

深入CSS | 青训营笔记