CSS常用布局

在CSS中我们常用的标签元素大部分都是块级盒子，但，我们都知道，块级盒子默认都是独占一行，纵向布局，那么我们如何使我们的布局改为横向布局呢？有下列几种方法：

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

存在的问题:使用float之后，所在的父级元素无高度，会导致下方元素向上移动
解决办法:
1、给父级元素设置高度（不推荐)
2、给父级元素设置overflow: hidden;达到父级高度随自己高度自适应的效果（推荐)
无法解决的问题
1、元素之间均匀分布需要计算，而且不一定均匀分布
2、元素均分父级需要计算，而且不一定实现均分
3、书写繁琐，代码冗余


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

存在的问题:使用之后元素之间产生莫名其妙的空隙，对整体的布局有影响
产生的原因:把换行和空格都当成空白
解决办法:1、把元素标签首位相连（不推荐)
2、文字大小处理，给使用display:inline-block的父级元素设置字体大小为0 font-size:0;
并且该元素要有有效的字体大小
无法解决的问题
1、元素之间均匀分布需要计算，而且不一定均匀分布
2、元素均分父级需要计算，而且不一定实现均分
3、书写繁琐,代码冗余

3、现代布局 dislpay :flex弹性盒子  （最常用的布局）
让多个元素横向布局，只需要给这些元素的父级元素添加dislpay: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:空白元素均匀分布
*/