1.固定布局（最基本的布局）
2.流式布局也叫百分比布局
把元素的宽,高,margin,padding不再用固定数值,改用百分比,这样元素的高,margin,padding 会根据页面的尺寸随时调整，已达到适应当前页面的目的.
* 百分比是基于元素父级的大小计算得来的；
* 元素的水平或者竖直间距都是相对于父级的宽度计算的.(margin&padding)
* 边框不能用百分比设置
3.弹性布局（伸缩布局）
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的。
属性值：(注意兼容性)
* flex-direction：属性决定主轴的方向及起点（即项目的排列方向）row | row-reverse | column | column-reverse;
* flex-wrap
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
* flex-flow
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap，eg：flex-flow: flex-direction || flex-wrap;
* justify-content 属性定义了项目在主轴上的对齐方式
* align-items 属性定义项目在交叉轴上如何对齐
* align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
4.浮动布局(float)
5.定位布局
position: fixed;固定布局
position: relative;相对定位，相对于元素自身定位，不脱离文档流
position: absolute;绝对定位，脱离文档流
6.grid布局
CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容，示例：
1.html：
2.css:
div.grid{
display: grid;
grid-template-columns: 100px 100px 100px; /*列*/
grid-template-rows: 100px 100px 100px; /*行*/
grid-column-start: 1;
grid-column-end: 4;
}
div.item{
background: red;
border: 1px solid #fff;
text-align: center;;
color: #fff;
line-height: 6;
}
div.item1{
grid-column: 1 / 4;
}
.item1 { /* 第一列开始，横跨3-1=2列 */
grid-column-start: 1;
grid-column-end: 3;
}
.item3 {/* 第二行开始，横跨4-2=2行 */
grid-row-start: 2;
grid-row-end: 4;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
}
3.效果图：
