1 布局分类

1、固定宽度布局（一般在PC），一般宽度为960、1000、1024px；

2、不固定宽度布局（一般在手机），主要靠文档流自适应的原理来布局；

3、响应式布局，即在PC上固定宽度，手机上不固定宽度；

2 float布局

2.1 步骤

1、在子元素上加float:left 和width； 2、在父元素上加.clearfix;

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}

2.2 经验

1、有经验者会留一些空间或者最后一个不设width；

2、不需要做响应式，因为手机上没有IE，而float布局是专门为IE准备的；

3、IE6/7存在双倍margin bug，解决方法：

一个是在该float元素的样式最后一行加上 _margin的一半；

另一个是最后加display:inline-block；

2 float布局

2.1 三栏布局

浮动--浮动--浮动--clearfix；

2.2 平均布局

在外面加一层div，div的margin-left/right为负的边框间隙；

3 flex布局

3.1 container属性

1、让一个元素变成flex容器：

.container{
  display:flex/inline-flex;

2、改变items流动方向（主轴）：

.container{
  flex-direction:row/row-reverse/column/column-reverse;
}

3、改变折行：

.container{
  flex-wrap:nowrap/wrap/wrap-reverse;

4、主轴对齐方式：

.container{
  justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly;
  }

5、次轴对齐：

.container{
  align-items:flex-start/flex-end/center/stretch;
}

6、多行内容：

.container{
  align-content:flex-start/flex-end/center/stretch/space-between/space-around;
}

7、align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置，只有一行的时候align-content没有任何效果。

3.2 items属性

1、order：按数字从小到大排列，可为负数和0；

2、flex-grow:当页面大小变化时，items根据flex-grow的大小变化。一般在导航栏中，最左边和最右边两栏设为0，中间设为1；

3、flex-shrink:页面缩小时，根据属性值不同程度的缩小，默认为1，为0时是防止变瘦；

4、flex-basis控制基准宽度，默认是auto；

5、可以缩写：flex:flex-grow flex-shrink flex-basis;

6、align-self 定制align-items，对齐方式可以和其它item不同；

3.3 重点代码

1、display:flex

2、flex-direction:row/column

3、flex-wrap:wrap

4、justify-content: center/space-between

5、align-items:center

6、flex和margin-left/right:auto配合，可实现 justify-content: center；的效果

4 grid布局

A Complete Guide to Grid - CSS-Tricks

4.1 container

.container{
  display:grid/inline-grid;
}

4.2 行和列

1、划分行和列

.container{
  grid-template-columns:列宽1 列宽2 列宽3...;
  grid-template-rows:25% 29px auto ...;
}

2、设置item范围

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

3、fr: free-space:份

.container{
  grid-template-columns:1fr 50px 1fr 1fr;
}

4、分区 grid-template-areas

<div class="container">
  <div class="a">aaaa</div>
  <div class="b">bbbbb</div>
  <div class="c">cccccccccc</div>
  <div class="d">dddddddddddddd</div>
</div>

.container{
  display:grid;
  /* width:200px; */
  grid-template-columns:50px 50px 50px 50px;
  border:1px solid red;
  grid-template-rows:auto;
  grid-template-areas:
    "header header header header"
  "main main main sidebar"
  "footer footer footer footer"; 
}

.a{
  grid-area: header;
  border:2px solid green;
}
.b{
  grid-area:main;
  border:2px solid blue;
}
.c{
  grid-area:sidebar;
  border:2px solid pink;
}
.d{
  grid-area:footer;
  border:2px solid orange;
}

5、空隙 gap

.container{
  grid-column-gap:10px;
  grid-row-gap:20px;
}