--- 布局：圣杯、双飞翼、flex布局
- 三列布局，中间宽度自适应，两边定宽；
- 中间栏要在浏览器中优先展示渲染；
- 允许任意列的高度最高；
1、圣杯布局： 需要设置position定位
- 设置container包裹 main、left、right，设置container左右外边距，为left、right留出位置
- 设置main、left、right 左浮动，main 宽度为100%，left、right根据需求设置宽度，left、right的 margin-left 设置为 -100%、-宽度
- 设置main、left、right 的 position 为 relative，left左移它的宽度，right右移它的宽度
- ⚠️因为子元素都为浮动元素，所以此时会出现父容器塌陷，但是此时不应该使用 overflow：hidden，因为左右会被隐藏；这时候就需要使用after伪元素了！！！
2、双飞翼： 与圣杯布局的区别在于： “中间栏div内容不被遮挡”问题的思路不一样。
- 给 main 增加一个子元素 div content，main宽度为100%
- 三个都设置float：left、height、background
- 左右设置宽度，左：左外边距 -100%；右：左外边距 -宽度
- 设置 content 的 左右 margin 分别为 left、right 的宽度
自己想到的方法：中间宽度为：width: calc(100% - 200px)，此处为计算宽度，因为宽度要跟随左右侧栏宽度实现自适应
--- 栅格布局
父容器：
.container {
display: grid;
grid-template-rows: 100px 100px 100px; /*1fr 1fr fr，按宽高自动分配*/
grid-template-columns: 100px 100px 100px;
grid-template: repeat(3, 1fr) / repeat(3, 1fr); /*简单写法*/
}
