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；并且该元素要有有效的字体大小

3.现代布局：display：flex 弹性盒子

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

1. 控制弹性盒子模型内子元素的排列方向

   1. flex-direction：row——默认从左到右横向排列
   2. flex-direction：row-reverse——从右到左横向排列
   3. flex-direction：column——纵向从上到下排列
   4. flex-direction：column-reverse——纵向从上到下排列

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

   1. flex-wrap:wrap 换行
   2. flex-wrap:nowrap 不换行

3. 设置弹性盒子内子元素的排列顺序，order作用到子元素上

   1. order:1;
   2. 属性值为一个整数值，数值越小越靠前

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

   1. flex-grow：拉伸因子【横向平均】

   2. flex-shrink：压缩因子

   3. flex-basis：基准因子

      .top{
          width: 800px;
          background:yellow;
      	flex-direction：row；
      }
      .left{
          width: 200px;
          height: 200px;
          background: rgba(99, 75, 176, 0.671);
      	flex-grow：1
      	flex-shrink:1
      }
      .right{
          width: 200px;
          height: 200px;
          background: rgb(166, 51, 166);
      	flex-grow：1
      	flex-shrink:1
      }
      .bottom{
          width: 200px;
          height: 200px;
          background: rgb(30, 123, 29);
      	flex-grow：1
      	flex-shrink:1
      }
      
      

5. 控制弹性盒子内子元素的分布方式 justify-content:flex-start

   1. flex-start :代表元素在排列方向上的开始位置分布

   2. flex-end：代表元素在排列方向上的开始位置分布

   3. center：代表元素在居中位置分布

   4. space-between：代表空白元素分布在元素中间

   5. space-around：空白元素分布在元素周围​

   6. space-evenly：空白元素均匀分赛在各个元素的缝隙​​

   7. justify-content：center;
      

6. 控制弹性盒子内子元素在垂直方向上的对齐方式align-items：xxx属性如下

   1. flex-start 顶部（左端）
   2. flex-end 在底部对齐（右端对齐）
   3. center 垂直方向上在中端对齐​
   4. baseline 以首行文字底部对齐​

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

   1. 所有行都靠近顶端​

   2. flex-start 顶部（左端）

   3. flex-end 在底部对齐（右端对齐）

   4. center 在中端对齐

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

   6. space-around 空白元素分布在行与行周围

   7. space-evenly：空白元素均匀分赛、​​

补充：弹性盒子巩固教程：【Cheat Sheet】【01】一张图掌握Flexbox弹性盒子布局_哔哩哔哩_bilibili