1. 网页布局

居中布局

整体居中方法

居于整个页面居中

单列布局

头部、内容、尾部

header、main、footer

两列布局

三列布局

浮动法、绝对定位法、margin负值法（应用最广）

双飞翼布局和圣杯布局

瀑布流布局

弹性盒布局

display：flex（弹性容器）

flex-wrap

垂直排列flex-direction

弹性盒布局的对齐

主轴和垂轴

主轴上的对齐方式

justify-contnet

垂轴方向上的对齐方式

align-content

压缩弹性元素

放大弹性元素

栅格布局（重要）

二维布局

相应的属性

grid-template-columns和grid-template-rows

定义行列的数量和宽度

1：2：3=1fr：2fr：3fr

grid-template-area

完成对区域的定义

grid-column-gap和grid-row-gap

行列之间的间距，可合写：grid-gap

一些关键字和函数

fr：按份占比

auto：按浏览器决定空间的长度

min-contnet&max-content：计算最小空间和最大空间

repeat:repeat(6,200px) 6个参数份额

auto-fill：调整数量

minmax（）：

auto-fit

fit-content

栅格布局的对齐方式

justify-container

align-content

justify-items

align-items

justify-self

align-self

等同于

栅格线

可以给栅格线定义每条线的名字

以上四个可以等同于grid-area

修改重叠的顺序

定义栅格元素的放置规则

grid-auto-flow

grid-auto-rows

grid属性：以下的简写

栅格元素的特性

总结

相比较于旧技术的布局，近几年来随着弹性盒布局和栅格布局，使得布局整体简单美化。