页面布局方式

        在页面中我们需要横向布局或纵向布局来完成其中纵向布局很简单，可以使用div标签等就可以轻易完成，所以这里提到的布局方式全为实现横向布局。

一、传统布局 float

需要向横向布局的元素添加float属性 其值:left(左浮动) right(右浮动)

 存在的问题：使用了float之后，所在的父级元素无高度，会导致下方元素向上移动

 解决方法:   1、给父级元素设置高度（不推荐）

                    2、给父级元素设置 overflow: hidden; 达到父级高度随自己高度自适应的效果（推荐）

无法解决的问题： 1、元素之间均匀分布需要计算，而且不一定均匀分布

                              2、元素均分父级需要计算，而且不一定实现均分

                              3、书写繁琐，代码冗余

二、传统布局 display:inline-block 内联块级元素

向需要横着布局的元素添加 display:inline-block 变为内联块级元素，内联块级元素不独占一行，对宽高支持

    存在的问题：使用之后元素之间产生莫名其妙的空袭，对整体的布局有影响

    产生的原因：把换行和空格都当成空白

    解决办法：1、把元素标签首尾相连（不推荐）

                      2、文字大小处理，给使用display:inline-block的父级元素设置字体大小为0 font-size: 0; 并且该元素要有有效的字体大小

    无法解决的问题： 1、元素之间均匀分布需要计算，而且不一定均匀分布

                                  2、元素均分父级需要计算，而且不一定实现均分

                                  3、书写繁琐，代码冗余

三、现代布局 display:flex 弹性盒子

让多个元素横向布局，只需要给这些元素的父级元素添加 display:flex

1、控制弹性盒子模型内子元素的排列方向 flex-direction

该属性取值如下：

    row 横向从左到右排列

    row-reverse 横向从右到左排列

    column 纵向从上到下排列

    column-reverse 纵向从下到上排列

2、设置弹性盒子内子元素是否换行 flex-wrap

取值如下：

        wrap 换行

        nowrap 不换行

3、设置弹性盒子内子元素的排列顺序

order 作用到子元素上，属性值为一个整数，值越小，该子元素出现的顺序越靠前

4、flex 控制弹性盒子内子元素的缩放比列 复合属性

        flex-grow 拉伸因子

        flex-shrink 压缩因子

        flex-basis 基准因子

5、控制弹性盒子内子元素的分布方式 justify-content（常用）

该属性的取值如下：

        flex-start 代表在排列方向上的开始位置分布

        flex-end 代表在排列方向上的结束位置分布

        center 代表在排列方向上的中间位置分布

        space-between 空白元素分布在元素中间

        space-around 空白元素分布在元素周围

        space-evenly 空白元素均匀分散

6、控制弹性盒子内子元素在垂直方向上的对齐方式 align-items

该属性的取值如下：

        flex-start 顶部（左端）

        flex-end 底部（右端）

        center 居中对齐

        baseline 首行底部对齐

7、设置弹性盒子内多行元素的分布方式 align-content

该属性的取值如下：

        flex-start 所有行都靠近顶部（左端）

        flex-end 所有行都靠近底部（右端）

        center 多行居中显示

        space-between 空白元素分布在行与行之间

        space-around 空白元素分布在行的周围

        space-evenly 空白元素均匀分布