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圣杯布局

顶上 下面固定 中间自适应 左右固定宽度