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

本堂课重点内容

本节课对CSS进行了简单的深入学习

详细知识点介绍

CSS求值

在CSS中，和文字相关的属性一般是可继承的，和模型相关的属性则一般不可继承。

对于不可继承的属性，我们可以使用inherit值进行显式继承。在CSS中，每个属性都有一个初始值，比如background-color的初始值为transparent，margin-left的初始值为0，可以使用initial关键字显式重置初始值。

浏览器拿到HTML生成DOM树和样式规则
对规则进行筛选：选择器匹配、属性有效、符合当前media等，生成Declared Values
按照来源、!important、选择器特异性、书写顺序等选择出Cascaded Value
当Cascaded Value为空时，使用继承值或者初始值，得到非空的Specified Value
将相对值或者关键字转化为绝对值，得到计算值Computed Value
将计算值进行进一步转换，将关键字、百分比等转换为绝对值，得到使用值Used Value
将小数像素值转换为整数，得到实际值。

计算值是分析CSS就能得到的，使用值需要结合环境实际情况。继承时继承得到的是计算值。

布局

布局相关技术：

常规流
- 行
- 块
- 表格
- flex
- grid
浮动
绝对定位

基本盒模型

box-sizing:content-box：宽高相对于容器的content

box-sizing:border-box：宽高相对于border中内容

padding：设置时按顺时针顺序

border：容器宽高设置为0得到三角形

margin：垂直边距合并，取auto实现水平居中

行与块

block：

独占一行
适合于所有盒模型属性

inline：

不独占
不能指定盒模型中的width与height（由内容决定）

inline-block:

本身是行级，但可以设置宽高，作为整体不能被拆散成多行

常规流

行级排版上下文

只包含行级盒子的容器会创建一个inline formatting context（IFC）
IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时换行显示
- text-align决定水平对齐
- vertical-align决定垂直对齐

块级排版上下文

block formatting context（BFC）

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

 <span>
     this is a text and
     <div>
         block
     </div>
     and other text.
 </span>

父元素中只允许存在一种上下文，此时会创建两个匿名的块级盒子包裹文字。

flex box

flex-direction规定方向

主轴使用justify-content对齐，副轴使用align-items进行对齐。

flex-grow 由剩余空间时的伸展能力
flex-shrink 容器空间不足时的收缩能力
flex-basis 没有伸展或收缩时的基础长度

grid

二维布局方式

grid-template-columns划分列，grid-template-columns划分行

grid-row-start、grid-column-start、grid-row-end、grid-column-end进行网格线划分

grid-area：1/1/3/3

float

实现文字环绕图片效果，没有flex和grid前用float实现布局效果

position

static：默认值
relative：相对自身原本位置偏移，不脱离文档流
absolute：绝对定位，相对于最近非static祖先元素定位
fixed：相对于视口绝对定位
sticky：黏性定位

CSS深入 | 青训营笔记