历代网页布局方式

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

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

你可能感兴趣的:(历代网页布局方式)