唐兆文8.17

页面布局

绝对定位的元素都将变成块级元素 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属性取值

标签

评论

this is is footer