css布局

一.传统布局 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 横向从右往左排列
colum 纵向从上到下排列
colum-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 空白元素均匀分散