CSS布局

一、传统布局 float    

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

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

解决办法:     

       1、给父级元素设置高度(不推荐)     

       2、给父级元素设置overflow: hidden;若未设置父级高度，则实现随高度自适应的效果；如果已经设置了父级元素高度，则超出部分隐藏。（推荐）

无法解决的问题  

1、元素之间均匀分布需要计算，而且不一定均匀分布

2、元素均分父级需要计算，而且不一定实现均分（如800px均分三份）

3、书写繁琐，代码冗余    

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

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

存在的问题:使用之后元素之间产生莫名其妙的空隙，对整体的布局有影响（浏览器解析会把换行和空格都当成空白）  

解决办法:     

       1、把元素标签之间不换行 (不推荐)元素很多的时候很复杂

       2、文字大小处理，给使用display:inline-block的父级元素设置字体大小为0 font-size:0;但是父类中的元素都要字体大小     

无法解决的问题（同第一种）

1、元素之间均匀分布需要计算，而且不一定均匀分布

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

3、书写繁琐，代码冗余

      

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

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

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

该属性取值如下:

       row 横向从左到右排列（默认）     

       row-reverse横向从右往左排列

       column 纵向从上到下排列

       column-reverse纵向从下到上排列

       以row-reverse举例

   

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

取值如下:    

       wrap 换行    

       nowrap 不换行（默认）   

3、设置弹性盒子内子元素的排列顺序（作用到子元素，前面没写的作用到父元素）    

       order:属性值

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

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

       flex-grow 拉伸因子

（flex-grow:1   根据子元素中的属性值设置比例大小，如果三个元素都是1，则把剩余部分每个子元素分三分之一）  

        flex-shrink压缩因子（超出部分按比例分，相减）

        flex-basis 基准因子    

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

该属性取值如下:    

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

       flex-end代表在排列方向上的结束位置分布（注意区分row-reverse！！！）

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

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

       space-around 空白元素分布在元素周围    空 元素 空 空 元素 空（元素左右都有空）

       space-evenly空白元素均匀分散          空 元素 空 元素 空

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

该属性取值如下: 

       flex-start  横向为顶部(纵向为左端)

       flex-end 底部(右端)

       center 居中对齐 

       baseline文字首行底部对齐

 以center为例：

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

该取值如下（与5大致相同，只不过变成行之间的分布）

       flex-start:所有行都靠近顶部(左端)   

       flex-end:所有行都靠近底部(右端)    

       center:多有行居中显示

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

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

       space-evenly:空白元素均匀分布