深入学习CSS进阶（二） | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第3天！

本期重新打卡学习CSS进阶（二）部分，进行查漏补缺

布局相关技术

布局分为：① 常规流 ② 浮动 ③ 绝对定位

常规流：行级、块级、表格布局、FlexBox、GridBox

一些场景：
① 默认情况下盒子为content-box（即width和height只代表content的高度），通常我们会设置成border-box
② margin使用auto值得时候，浏览器会对剩余部分进行平分 ③ margin collapse 会出现边距合并问题（高度塌陷）

IFC - Inline Formatting Context

• 只包含行级盒子的容器会创建一个IFC
• 盒子在一行内水平摆放
• 一行放不下时，会进行换行显示
• text-align会决定一个盒子在行内的垂直对齐
• 避开浮动元素

BFC - Block Formatting Context

• 会创建BFC的情况：1. 根元素 2. 浮动、绝对定位、inline-block 3. Flex子项和Grid子项 4. overflow值不是visible的块盒 5. display: flow-root;
• 盒子从上到下摆放
• 垂直的margin会被合并
• BFC内盒子不会与外面的合并
• BFC不会与浮动元素重叠

Flex Box

• 一种新的排版上下文
• 可以控制子级盒子的：1. 摆放方向 2. 摆放顺序 3. 盒子宽度高度 4. 水平和垂直方向的对齐 5. 是否运行折行

常见的flex布局场景有：

方向：flex-direction: row | row-reverse | column | column-reverse;

主轴：justify-content: flex-start | flex-end | center | space-between | space-arount | space-evenly;

交叉轴：align-items: flex-start | flex-end | center | stretch（默认就是填充满） | baseline;

单个项目：align-self: auto | flex-start | flex-end | center | baseline | stretch;

顺序：order: number;（越大越靠后）

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

Flex布局 - 阮一峰

Grid Box

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

Grid布局 - 阮一峰

float布局

应用场景逐渐变少

position属性

• static 默认值，非定位元素
• relative 相对于原本位置偏移，不脱离文档流
• absolute 绝对定位，相对非static祖先元素定位，脱离常规流
• fixed 相对于视口绝对定位
• sticky 粘性定位，在视口内时为相对定位，超出视口则为fixed定位