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属性:以下的简写
栅格元素的特性
总结
相比较于旧技术的布局,近几年来随着弹性盒布局和栅格布局,使得布局整体简单美化。