display 页面布局，有值：
block 默认父元素宽度，可设置宽高，换行显示 有div p h1-h6 ul form等
inline 默认内容宽度，不可设置宽高，同行显示 有span a label cite em等
inline-block 默认内容宽度，可设置宽高，同行显示，整块换行 有input textarea select button等
none 设置元素不显示，不占高度（与visibility:hidden的区别，hidden占位）
布局：
水平居中：margin:0 auto; 意为垂直高度0，水平分布自动分布（平分）
需要注意的点：需要设置宽高的内容必须是block或inline-block，在需要进行布局的时候需要设置元素为inline-block
position 布局
设定位置方式，主要是对参照物的位置，有值设置位置
top 顶部
right 右边
bottom 下方
left 左边
z-index z轴，覆盖用，默认为0，可以有负值。但是有堆栈（先判定父元素）
static 默认，没有定位，忽略以上5个值的声明
relative 相对定位，仍在文档流中，相对于其正常位置
absolute 绝对定位，默认宽度为内容宽度，脱离文档流，相对于第一个父元素的位置
fixed 固定定位，默认宽度为内容宽度，脱离文档流，相对于浏览器窗口位置
tips：1、在定位元素没有设置宽高时，同时设置四个边距值，可将该元素拉开
2、可以用z轴设置遮罩做弹窗效果
float：浮动
left 向左浮动
right 向右浮动
none 默认值
inherit 继承
tips：浮动的元素默认宽度为内容宽度，向指定方向一直移动，脱离文档流，所有float的元素还在同一文档流。需要添加的clearfix内容解决兼容问题：
.clearfix:after{content:'.';display:block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
.clearfix{zoom: 1;}
含义为：在clearfix这个需要浮动的元素的父元素后添加一个after的元素，内容为一个.来将这个父元素撑开，然后将这个点设置为隐藏。实现将浮动出的元素包含在原来的父元素中（使父元素保持高度）。如果还有IE低版本中，不支持:after功能，需要在以上代码增加一句.clearfix{zoom: 1;}以解决兼容性问题。
flex 弹性元素布局
要设置
display:flex;
将元素设置为弹性元素（在文档流中的子元素（孙元素不行）才会继承弹性元素）
有属性：
排列相关：
flex-direction 排列方向，有值：row，行，默认值，从左往右；row-reverse，反向行，从右往左；column，列，从上往下；column-reverse，反向列，从下往上；
flex-wrap 换行规则，有值：wrap，正向换行；wrap-reverse，反向换行；
flex-flow 是值缩写，建议使用，语法为flex-flow:<'flex-direction'>||<'flex-wrap'>
order 取值为数字，默认为0，是一个相对值，改变元素在主轴上的排序先后，有负值
弹性相关：
flex-grow 值为数值，默认为0，没有负数，意为分配空余空间给对应元素的比例（在空间有剩余的时候）
flex-shrink 值为数值，默认为0，没有负数，意为分配负空余空间给对应元素的比例（在空间没有剩余的时候）
flex-basis 设置初始宽高，语法为flex-basis:main-size|，要结合弹性来看
flex 值缩写，语法为flex:<'flex-grow'>||<"flex-shrink'>||<'flex-basis'>;默认值为initial: 0 1 main-size;
对齐相关：（在有剩余空间的时候）
justify-content 设置主轴方向上的对齐方式，有值flex-star向开始位置对齐；flex-end向结束位置对齐；center居中对齐；space-between平均分配；space-around包括首尾也平分；
align-items 设置辅轴方向上的对齐方式，有值flex-star向开始位置对齐；flex-end向结束位置对齐；center居中对齐；baseline基线对齐（指文字基线对齐）；stretch自适应充满辅轴方向；
align-self 设置单个元素在辅轴方向上的对齐方式，auto默认值；其余类似align-items
align-content 设置容器内有多行元素且有剩余空间时的辅助剩余空间分配方式，有值：flex-star向开始位置对齐；flex-end向结束位置对齐；center居中对齐；space-between平均分配；space-around包括首尾也平分；stretch自适应充满辅轴方向；
需要加空隙的时候加一个margin-方向:值;的属性即可添加一个外边距以增加空隙
网友评论