弹性布局总结

布局方式

1. 表格 -缺点:表格布局的标签比使用HTML其他布局标签数量多，占用更多的流量资源，加载速度慢，一般不推荐使用
2. 浮动

缺点:

1.对自身的影响，使用了浮动的元素可以形成块。就是说可以使行内元素拥有宽高

2. 对父级的影响，造成父容器坍塌，父容器的高度为0

3. 对兄弟元素的影响，在同行能放下的情况，兄弟元素的布局发生了变化

3.定位

4.多列

5.弹性布局 display: flex;

1.父容器变成弹性盒模型后，子元素会成为行内块元素

2.子元素在主轴上会忽略自身宽度，自适应父容器

flex-direction: row; 默认子项沿着x轴排列，从左到右

row-reverse；x作为主轴方向，起始线是右到左

flex-wrap: nowrap;默认，子项不换行

flex-flow: row wrap;上面两个的综合写法

justify-content:center;设置主轴方向上的对齐方式

align-items; center; 设置交叉轴上的对其方式

align-content: flex-start; 多行容器的对其方式

BFC 规范 (块级格式化上下文)

1、使用浮动

2、绝对定位

3、display:inline-block-·table-cells -flex

4、overflow·除了visible·以外的值

BFC 解决的问题

1.margin 叠加问题

2.margin 传值问题

3.清除浮动

4.解决覆盖问题