what is Grid
- 是一种二维布局模型，先在页面上画好“虚拟格子”，再设置元素在格子上的位置和跨度
、
相关概念
- Grid Container 容器
- Grid item 容器内的元素
- Grid Line 容器内的线
- Grid Area 容器内由几个格子组成的区域
How to use Grid layout
- 容器
1.设置grid布局——display: grid;
2.画虚拟格子—— 分为两部分，前面设置行的高度，后面设置列的宽度，用/分开，其中
- auto表示高度由内容决定，fr表示撑满自由空间，如果2列等宽课设置1fr 1fr
grid: 30px auto 100px / 10% 40px 1fr 10%;
- 子项
放置自己的位置——grid-area: 1/2/3/4，即第一行第二列第三行第四列
表示开始的行线/开始的列线/结束的行线/结束的列线所覆盖的范围
- grid-column:1/span 2，表示从第一条列线开始，跨两列，等价于grid-column:1/3
- grid-row:1/span 2，表示从第一条行线开始，跨两行，等价于grid-row:1/3
浮动
how to use floating layout
- 给孩子：使用浮动
.child { float: left/right; left左浮动，right右浮动
- 给容器：清除浮动，包裹孩子
.container::after {
content: '';
display: block;
clear: both;
}
BFC—Block Formatting Context，块级格式上下文
- 内部的块级盒子会在垂直方向，一个接一个地放置
- 两个盒子垂直方向的间距由margin决定，属于同一个BFC的两个相邻盒子的外边距会发生折叠
- BFC的区域不会与浮动盒重叠
- 创建BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC形成条件
- 根元素
- float属性不为none
- position为absolute、fixed
- display为inline-block、table-cell
- display:flow-root 或者 flow-root list-item
- overflow为hidden、scroll、auto
- flex和Grid的子项
