CSS布局

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

概念

布局相关技术

盒模型（Box）

块级盒子（Block Box）

块级盒子是CSS中的概念
特性

不和其它盒子并列摆放
适用所有的盒模型属性

行内盒子（Inline Box）

行内盒子是CSS中的概念
特性

和其它行级盒子一起放在一行或拆开成多行
盒模型属性中的width、height不适用

块级元素

块级元素是HTML中的概念
块级元素会生成块级盒子
块级元素举例：body、article、div、main、section、h1-h6、p、ul、li等
非块级元素可以通过display:block;将其设置为块级元素

行内元素

行内元素是HTML中的概念
行内元素会生成行内盒子
行内元素举例：span、em、strong、cite、code等
非行内元素可以通过display:inline;将其设置为行内元素

行级排版上下文

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

块级排版上下文

Block Formatting Context（BFC）
某些容器会创建一个BFC
- 根元素（html标签）
- 浮动、绝对定位、inline-block
- Flex子元素和Grid子元素
- overflow值不是visible的块盒
- display: flow-root;
BFC的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠

FlexBox 布局

这是一种新的排版上下文
它可以控制子级盒子的：
- 摆放的流向（→ ← ↑ ↓）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
flex布局有主轴与侧轴之分
- 主轴（默认）使用justify-content进行对齐
- 侧轴使用align-items进行对齐
Flexibility（弹性）
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
- flex-grow有剩余空间时的伸缩能力
- flex-shrink容器空间不足时的收缩能力
- flex-basis没有伸展或收缩时的基础长度
flex（缩写属性）
- flex: 1; -> flex-grow: 1;
- flex: 100px; -> flex-basis: 100px;
- flex: 2 1; -> flex-grow: 2; flex-shrink: 1;
- flex: 1 100px; -> flex-grow: 1; flex-basis: 100px;
- flex: 2 0 100px; -> flex-grow: 2; flex-shrink: 0; flex-basis: 100px;
- flex: auto; -> flex: 1 1 auto;
- flex: none; -> flex: 0 0 auto;

Grid 布局

和flex布局的区别？
- flex是一条线性的布局，grid是二维的布局
grid布局的使用方法
1. display: grid;使元素生成一个块级的Grid容器
2. 使用grid-template相关属性将容器划分为网格
3. 设置每一个子项占哪些行和列

设置子项所占区域

.a {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 3;
}

// 或这样简写
.a {
    // 行开始/行结束/列开始/列结束
    grid-area: 1/1/3/3;
}

Float 浮动

可以用来实现文字环绕的效果

position属性

static 默认值，非定位元素
relative：相对定位，相对自身原本位置偏移，不脱离文档流
absolute：绝对定位，相对最近的非static的祖先元素定位，脱离文档流
fixed：绝对定位，相对于视口（网页窗口）进行定位

总结

CSS布局既简单也复杂，这次复习加深了对于块级和行内元素、盒子的概念的理解，以及float的作用、flex和grid布局的用法等等

第三课：CSS布局