CSS布局

2017-09-24  本文已影响16人  陈老板_

布局:将元素以正确的大小摆放在正确的位置上,元素摆放模式

display

设置元素的显示方式
block:默认宽度是父元素,可设置宽高,换行显示
inline:默认宽度是内容宽度,不可设置宽高,同行显示
inline-block:默认宽度是内容宽度,可设置宽高,同行显示,整块换行
none:设置元素不显示,和visibility-hidden区别就是none隐藏之后后元素会占据

position

position 设置定位方式 top bottom right left 可设置边缘距离,默认为static静态定位。relative :相对定位,仍在文本流中,参照物为元素本身,绝对定位的参照物。
absolute:绝对定位,默认宽度为内容宽度,脱离文档流,参照物为第一个定位祖先/根元素。
fixed:固定定位,默认宽度为内容宽度,脱离文档流,参照物为视窗。可用于固定顶栏和遮罩
z-index:设置元素在z轴上的排序,默认值是0,设置比0大会盖在0上面
z-index栈:元素根据参照物的z-index的大小,不管子元素多大也不会超过参照物相比较。

float

right向右浮动,left向左浮动。默认宽度为内容宽度,脱离文档流(会被边框挡住),向指定方向一直移动。
float元素在同一文档流。
float元素半脱离文档流:对元素脱离文档流,对内容在文档流。

clear

清除浮动,应用于后续元素,应用于块级元素。
加空白元素,clearfix。一般使用clearfix:after{context‘.’;clear:both;height:0;overflow:hidden;visibility:hidden;}

flex

弹性浮动
方向:
flex-direction

flex-wrap 弹性换行
wrap:正向弹性换行 wrap-reverse:反向弹性换行

flex-flow 能一次设置以上两个属性

弹性:
flex-basics 设置flex item的初始宽高
flex-grow 分配元素剩余空间的比例 初始值0
flex-shrink 初始值1

对齐:
justify-content


align-items 设置辅轴方向对齐方式

align-self 设置每个元素在辅轴方向对齐方式

align-content 设置多行在辅轴方向对齐方式

上一篇 下一篇

猜你喜欢

热点阅读