块级vs行级
- block level box
不和其他盒子并列摆放
适用所有的盒模型属性
- Inline level box
和其他行级盒子一起放在一行或拆开成多行
盒模型中width、height不同
display属性
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级，可以放在行盒中；可以设置高；作为一个整体不会被拆散成多行
- none：排版时完全被忽略
常规流 Normal Flow
- 根元素，浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内（in-flow）
- 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
-
inline formatting context（IFC）
-
只包含行级盒子的容器会创建一个IFC
-
IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动（float）元素
不可分割换行
arduino
复制代码
overflow-wrap:break-word;
块级排版上下文
-
block formatting context（BFC）
-
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- flex子项和Grid子项
- overflow值不是visible的块盒
- display：flow-root
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC不会和浮动元素重叠
Flex Box是什么
-
一种新的排版上下文
-
可以控制子级盒子的：
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会展；容器空间不够时，会收缩
- flex-grow：有剩余空间时的伸展能力
- flex-shrink：容器空间不足时收缩能力
- flex-basis：没有伸展或者收缩时的基础长度
Grid布局
Flex Box是单一的布局
Grid是一个二维的布局
display：grid
- display：grid是元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置每一个子项栈哪些行/列
划分网格
arduino
复制代码
grid-template-columns:100px 100px 200px;//列上的划分
grid-template-rows:100px 100px//行的方向
grid-template-columns:30% 30% auto;
grid-template-rows:100px auto
grid-template-columns:100px 1fr 1fr;
grid-template-rows:100px 1fr
grid line网格线
css
复制代码
.a{
grid-row-start:1;
grid-column-start:1;
grid-row-end:3;
grid-column-end:3;
}
.a{
grid-area:1/1/3/3;
}
.a{
grid-area:2/2/4/4;
}
.b{
grid-area:1/1/3/3;
}
float浮动
为了实现文字环绕的效果
float：left
position属性
- static 默认值，非定位元素
- relative 相对于自身原本位置偏移，不脱离文档流
- absolute 绝对定位，相对非static祖先元素定位
- fixed 相对于视口绝对定位
position：relative
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top、left、bottom、right设置偏移长度
- 流内其他元素当它没有偏移一样布局
position：absolute
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
position fixed
- 总是相对于所谓的窗口进行定位
学习CSS的几点建议
- 充分利用MDN和W3C CSS规范
- 保持好奇心，善用浏览器的开发者工具
- 持续学习，CSS新特性还在不断出现
