布局相关知识

布局方式

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

2.浮动  缺点:1、对自身的影响,使用了浮动的元素可以形成块。就是说可以使行内元素拥有高

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

                     3、对兄弟元素的影响,在同行能放下的地方,兄弟元素的布局发生了变化

3.定位

4.多列        

5.弹性布局    display:flex          1.父容器变成弹性盒模型后,子元素会变成行内块元素

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

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

            flex-direction:row-reverse; x轴为主轴,起始线从右到左

            flex-direction:column; 默认子项目沿着y轴排列，起始线从左到右

            flex-direction:column-reverse; y轴为主轴,起始线从右到左

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

            flex-flow: row wrap; 这个是以上两种综合写法

            justify-content: center;  居中对齐。设置主轴方向上的对齐方式 */

            justify-content: space-between; 两端对齐*/

            justify-content: space-around;  分散对齐*/

            justify-content: space-evenly;  平均对齐*/

           align-items: center; 中间 设置交叉轴的对齐方式*/

            align-items: flex-end; 向下

            align-items: flex-start; 向上

            align-content: flex-start;多行容器对齐

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

1.使用浮动

2.绝对定位 

3.display:inline:block table-cell flex

4.overflow 除了visible 以外的值

BFC解决的问题

1.margin 叠加问题

2.margin 传值问题

3.清除浮动

4.解决覆盖问题