创建布局

position 改变容器在容器块中的定位方式

left / right / top /bottom  设置元素相对于容器边界的偏移量
z-index: 设置元素的层叠顺序
z-index: 1;//z-index 数值越小越靠下

1.static 元素为普通元素，默认值
2.relative 元素位置相对于普通位置定位
3.absolute 元素相对于position值不为static的第一个祖先元素定位
4.fixed 元素相对于浏览器的窗口来定位

创建多列布局

多列特性允许在多个垂直列中布局内容，跟报纸的排版方式类似。

column-count 指定列数
column-fill 指定内容在列与列之间的分布方式，balance指浏览器确保不同列之间的长度差异尽可能小，auto则按照顺序填充列。
column-gap 指定列之间的距离
column-rule 简写书属性 <宽度><样式><颜色>
column-rule-style 行之间的样式规则
column-rule-color 行之间的颜色规则
column-rule-width 行之间的宽度

columns 
column-span 指定元素横向能跨多少列
column-width 指定列宽

创建弹性盒布局

flexbox

flex-align 
flex-direction
flex-order
flex-pack

• -webkit 弹性盒属性

处理垂直空间
box-align 如果内容高度小于容器的高度告诉浏览器如何处理多余的空间(垂直的空间)
start 顶边
end 底边
center 元素中间
baseline  / 
stretch 调整元素高度 填充可用空间


多个元素伸缩
box-flex 指定元素的可伸缩性，应用于弹性盒容器的元素（横向）
#first {
        -webkit-box-flex: 3;
}
#second {
        -webkit-box-flex: 1;
}
浏览器分配first的空间是secod的3倍。

处理最大尺寸
box-pack 如果可伸缩元素达到最大尺寸，告诉浏览器如何分配空间
start 元素从左边开始放置
end 元素从右边开始放置
center 多余空间平均分配到第一个元素的左边和右边
justify多余空间平均分配到每个元素之间

创建表格布局 类似table