页面布局

绝对定位的元素都将变成块级元素 display:block

固定定位：永远都是相对于浏览器实现位置初始化

清除浮动：clear取值
left：清除之前左浮动的影响
right：清除之前右浮动的影响
none：不清除影响
both：清除之前左右浮动带来的影响

设置元素水平居中
{
postion：abslute；
top：0；
left：0；
bettom：0；
right：0；
}

css常用属性

块级(block)、行内块(inline-block)、行内（inline）

1 opacity=0，该元素隐藏起来，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发该事件。

2 visibility=hidden，该元素隐藏起来，但不会改变布局，但是不会触发该元素已经绑定事件

3 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除一样

弹性布局

元素设置为弹性容器之后，项目的float/clear失效，容器的vertical-align/text-align失效

flex-direction
row
默认值，主轴是x轴，主轴起点在左端
row-reverse
主轴是x轴，主轴起点在右端
column
主轴是y轴，主轴起点在顶端
column-reverse
主轴是y轴，主轴起点在底端
flex-direction属性取值

设置项目换行：flex-wrap
nowrap
wrap
wrap-reverse
空间不够，换行并反转
flex-wrap属性取值

定义项目在主轴上的对齐方式：justify-content
flex-start
flex-end
center
space-between
两端对齐，两端无空白
space-around
两端对齐，两端有空白，每个空白距离相等
justify-content属性取值

定义项目在交叉轴上的对齐方式：align-items
flex-start
flex-end
center
baseline
交叉轴基线对齐，就是交叉轴起点
stretch
项目不写高，占满交叉轴所有空间
align-items属性取值