1.表格布局
2.DIV+CSS布局
- float:left向左边横向自适应
3.flex布局
row 行
display :flex横排 指定row
4.grid1布局
disaplay:grid
分为外层布局元素，和内层子级元素
例子
grid-tempate-colums:css中定义列
grid-tempate-row；css中定义行
grid-colums-gap:列之间的间距
grid-row-gap:行之间的间距
padding:盒子之间的间距
grid2布局
追加样式 跨列 跨行
跨列例子：
grid-colums-start:1
grid-colums-end:3
意思是这个盒子从第一条边框线走到第三条边框线
跨行例子：
grid-row-start:2
grid-row-end:4
常见的布局场景类型
1圣杯布局
顶上 下面固定 中间自适应 左右固定宽度
