这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天，加油！
块级 VS 行级
| Block Level Box | line Level Box |
|---|---|
| 不喝其它盒子并列摆放 | 和其它行级盒子一起放在一行或拆开成多行 |
| 使用所有的盒模型属性 | 盒模型中的width、height不适用 |
块级元素和行级元素
| 块级元素 | 行级元素 |
|---|---|
| 生成块级盒子 | - 生成行级盒子 - 内容分散案子多个行盒(line box)中 |
| body、article、div、main、section、h1-6、p、ul、li等 | span、em、strong、cite、code等 |
| display:block | display:inline |
display属性
| block | 块级盒子 |
|---|---|
| inline | 行级盒子 |
| inline-block | 本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行 |
| none | 排版时完全被忽略 |
行级排版上下文
- Inline Formatting Context(IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box
- 一种新的排版上下文
- 它可以控制子级盒子
- 摆放的流向
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
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布局
- display:grid 使元素生成一个块级的 Grid 容器
- 使用grid-template 相关属性将容器划分为网络
- 设置每一个子项占哪些行/列
划分网格
.one {
grid-template-columns: 100px 100px 200px;
grid-template-rows: 100px 100px;
}
.two {
grid-template-columns: 30% 30% auto;
grid-template-rows: 100px auto;
}
.three {
grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr;
}
grid line网格线
float 浮动
现在用于做文字环绕效果
绝对定位
| position属性 | |
|---|---|
| static | 默认值，非定位元素 |
| relative | 相对自身原本位置偏移，不脱离文档流 |
| absolute | 绝对定位，相对非static祖先元素定位 |
| fixed | 相对于视口绝对定位 |
relative
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top、left、bottom、right设置偏移长度
- 流内其他元素当它没有偏移一样布局
absolute
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
fixed
- 脱离常规流
- 相对于视口进行定位
