今天进行CSS的总结，下面是布局部分

float布局

float布局是最过时的布局了吧(大部分为了IE，但是IE都没人用了)

• 在子元素加上float：left和宽度，父元素加上class=clearfix

  .clearfix{
          content: '';
          display: block;
          clear: both;
  }
  

• 平均布局：每个子元素margin-left：？px；在子元素外面加一个div，margin-left：-？px

flex

flex算是现在大热的布局了,可以用来解决目前大部分布局的需求，而且兼容性好

1. container:容器,在属性中加入display:flex;
2. item:元素
3. flex-direction：流动顺序。row，水平方向从左往右。row-reverse，水平方向从右往左。column，竖直方向从上往下。column-reverse，竖直方向从下往上。
4. flex-warp：折行。nowarp，不折行，元素都挤在一行，宽度会变形。wrap，折行，从头开始。warp-reverse，从底部开始
5. justify-content：主轴(纵轴)对齐方式。flex-start,往前挤。flex-end，往后挤。center，往中间挤。space-between，items的空隙均分剩下空间。space-around，item的左右margin一样。space-evenly，item和item间隙以及item与container间隙均分剩下空间。
6. align-items：次轴(横轴)对齐方式。式。flex-start,往上对齐。flex-end，往下对齐。center，沿container中线对齐。
7. align-content：多行内容展示方式。
8. order:item的属性，item按照order从小到大排序，默认0，没order按照元素顺序
9. flex-grow：item的属性，分配container多余水平空间的份数
10. flex-shrink：item的属性，水平空间不够的时候缩小占的比例，默认1，0是不变
11. flex-basis：item的基准宽度
    

gird

gird也算是一个厉害的布局，它把容器分为多个格子，让元素占一个或多个格子，这可以解决一些特殊的布局需求，但是兼容性一般。

1. container:容器,在属性中加入下面的代码

       display:flex;
       grid-template-columns: 100px auto;//声明竖直方向的gird格子大小
       grid-template-rows: 200px 30% auto;//声明水平方向的gird格子大小
   

2. 元素item可以设置占的范围，如下

         .item-a {
         grid-column-start: 2;
         grid-column-end: five;
         grid-row-start: row1-start;
         grid-row-end: 3;
         }
   

3. fr是gird布局的单位，其意思是分得空余空间的权重

4. gap可以设置元素之间的空隙

         grid-column-gap:10px;
         grid-row-gap:15px;
   

定位

1. 在position不更改的情况下，一个div的分层从最里面到最外面是：background < border < 块级子元素 < 浮动元素 < 内联子元素
2. 文字（内联子元素）是在最上层，后出现的在先出现的上面
3. position：定位方式。static默认值，元素待在文档流中。
4. position：relative，相对子定位，元素还是待在文档流中，元素在文档流的位置不变，但是显示位置会偏移。z-index不新建层，只是大的在小的上面。
5. position：absolute，相对不是static的祖先元素的绝对定位，脱离原来位置，另起一层。要写left和top
6. position：fixed，相对视口定位。父元素有transform：scale（1.1）；会炸。手机上不要用fixed
7. position：sticky，出现在文档流就正常显示，不出现在文档流就在视口边缘显示。兼容性不行
8. z-index:正数从正常定位的内联元素（文字）往上开始算，负复数从正常定位background往下开始算,z-index都是同一级的元素相比较。