布局方式一
使用定位
position属性设置了元素的定位内容
取值
static 普通布局，默认值
relative 相对于普通位置定位
absolute 相对于定位值不为static的第一位祖先元素定位
fixed 相对于窗口定位
通过left,right,bottom,top定位，如top为向下偏移。
z-index层叠顺序
布局方式二
多列布局，允许多个垂直列中布局内容
属性
column-count指定列数 取值为数值
column-fill指定内容在列与列之间的分布方式，取值balance确保不同列之间长度差异尽量小，取值auto表示按顺序对列进行填充，列长度会各有不同。
column-gap 指定列之间的距离
column-rule-color,column-rule-style,column-rule-width设置列之间边框的颜色，样式和宽度，简写column-rule值为宽度，样式，颜色
column-span 元素横向能跨多少列，column-width指定列宽 ，简写columns,值为长度值，数值
如果设置column-width，浏览器会通过删除或添加列数维持指定列宽。
布局方式三
创建弹性盒布局
兼容性不好
相关属性
1.首先容器display：flex;
2.内部子元素 box-flex属性会应用到弹性盒容器内部的元素，告诉浏览器当容器大小改变时哪些元素的尺寸是弹性的，也就是根据多余空间或缺损空间，进行放缩。
当伸缩多个元素时，设置的值代表着分配空间的比例。
3.容器box-align告诉浏览器如何处理多余的空间，有4个可选取值。
start元素沿容器顶边放置，空间在下方显示。
end和start相反.
center多与空间被分成两部分，分别在上下。
strech调整元素高度以充满。
4.box-pack伸缩不会超过内容元素的最大尺寸值，如果存在多余空间，浏览器会伸展元素，直到达到最大允许尺寸。有4个可选值
start 元素从左边开始放置，任何未分配的空间显示到最后一个元素的右边
end，与start相反
center,平均分配到左右两侧
justify，均分到各个元素之间。
布局方式四
创建表格布局
需要使用display属性,其值如下
1.用于容器,table，类似table元素
2.用于表示行的元素，table-row,类似tr
3.用于表示单元格的元素，在table-row中使用，table-cell,类似td
4.inline-table,table-caption,table-column等