css创建布局

布局方式一

使用定位

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等