CSS学习

摘要：本节课主要围绕盒模型中“行级”与“块级”这两种常见的布局结构展开，讲解其基本定义、各自特征、工作属性和排版规则，提供业内操作思路，帮助强化 CSS 实战技能。

1. 基本定义

简要讲述了两者定义进行区分

2. 各自特征

这里块级元素类似于html性质，行级元素类似于css性质（个人理解）

3. 工作属性

display 属性

block 块级盒子
inline 行级盒子
inline-block本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
none排版时完全被忽略

4. 排版规则

常规流Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流
其它元素都在常规流之内 (in-flow)
常规流中的盒子，在某种排版上下文中参与布局

有以下五种

1. 行级排版上下文

Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素

2. Flex 排版上下文

Flex Box 是什么?

一种新的排版上下文
它可以控制子级盒子的:
- 摆放的流向(→ 右边左边上面下面)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

Flexibility

可以设置子项的弹性: 当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

3. 块级排版上下文

Block Formatting Context (BFC)
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display: flow-root;

BFC 内的排版规则

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

4. Grid 排版上下文

display: grid

display: grid 使元素生成一个块级的 Grid 容器
使用grid-template 相关属性将容器划分为网格
设置每一个子项占哪些行/列

5. Table 排版上下文

table == { display: table; }
tr == { display: table-row; }
td, th == { display: table-cell; }

非常规流

position 属性

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

5.学习 CSS的几点建议

1.充分利用 MDN 和 W3C CSS 规范

2.持好奇心，善用览器的开发者工具

3.持续学习，CSS 新特性还在不断出现

今天学习感觉还能接受，就是css的内容还是非常大的，需要继续加油，可以仔细阅读之前平台上的学习资料，帮助很大。

星辰大海，你我同行。

第六届字节青训营css下 ｜ 青训营