【无标题】前端（布局）

布局
表格布局
display:table(转换成表格标签)
display:table-cell;
浮动
对自身的影响：脱离文本流，使元素独立起来并且可以设置宽高
对兄弟元素影响：改变兄弟元素布局
对父容器影响：造成坍塌
定位
left(左)
right（右）
固定布局：使用标准px单位
流式布局：使用百分百 %
多列布局：
列宽：column-width:xxpx;

弹性布局
Flex也叫弹性布局，可以实现子元素在父元素自动伸缩，特别适合移动端布局
display:flex;(转换成弹性盒模型，默认主轴方向是x轴，起始线是从左开始的)
flex-direction(适用在父上)改变主轴方向的
row：x轴为主轴
colum：y轴为主轴
flex-direction：row/colum-reverse;(row：x轴为主轴，起始线从右开始，colum：y轴为主轴，起始线从下开始）
flex-wrap:wrap;(子元素在父元素自动换行，默认是nowrap不换行)
以上两种的综合属性：flex-flow:;
justify-content(设置或检索弹性盒子元素在主轴方向上的对齐方式)
justify-content:center;(居中)
justify-content：space-between;(设置子元素在父容器中主轴的排列位置的。两端对齐属性，有空余会分配给每个子元素中间)
apace-around(将剩余空间分成元素的2倍，分别在元素左右分配)
evenly(平均分配剩余空间)
align-items:center;(设置侧轴上居中)
align-senlf:fiex-end；(设置在子元素上，设置元素在侧轴的位置)