CSS布局
布局:将元素以正确的大小摆放在正确的位置上,元素摆放模式
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 设置多行在辅轴方向对齐方式