这是我参与「第四届青训营」笔记创作活动的的第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:没有伸展或收缩时的基础长度;
Grid Box
- display: grid 使元素生成一个块级的 Grid 容器
- 使用 grid-template 相关属性将容器划分为网格
- 设置每一个子项占哪些行/列
float布局
应用场景逐渐变少
position属性
- static 默认值,非定位元素
- relative 相对于原本位置偏移,不脱离文档流
- absolute 绝对定位,相对非static祖先元素定位,
脱离常规流
- fixed 相对于视口绝对定位
- sticky 粘性定位,在视口内时为相对定位,超出视口则为fixed定位