CSS布局

先看以下图片

1. float布局

先在子元素加上width和left，再在父元素加上.clearfix

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

一般会留下一些空间不设置width，这种也不需要做成响应式。但是IE6/7存在双倍margin bug，可以选择直接写一半或者加上一个display:inline-block。

margin-left:10px;
_margin-left:5px;

或者

margin-left:10px;
display:inline-block;

若是发现图片下面有多余的东西，则可加上vertical-align:top(或者middle)，尽量要用border-box，在用border调试法时发现干扰宽度了，便将border改成outline。 也尽量不写margin:0 auto; 而是改成margin-left:auto;margin-right:auto; 效果一样。

做平均布局时只需要在平均布局的div加一个父元素div包起来，然后加上margin-right:-margin的值即可实现平均布局。

      .imgs {
        outline: 1px solid red;
        width: 600px;
        height: 100px;
      }
      .imgs .im {
        margin-right: 12px;
        width: 141px;
        height: 100px;
        float: left;
        background-color: pink;
      }
      .x {
        float: left;
        margin-right: -12px;
      }
      
    <div class="imgs clearfix">
      <div class="x clearfix">
        <div class="im"></div>
        <div class="im"></div>
        <div class="im"></div>
        <div class="im"></div>
      </div>

2. flex布局

• 容器container的样式

flex-direction 改变主轴方向，可选row\roe-reverse\column\column-reverse

flex-wrap 控制是否换行，可选nowrap\wrap

justify-content 主轴排列方式，可选flex-start\flex-end\center\space-between\space-around\space-evenly

align-items 侧轴排列方式,可选flex-start\flex-end\center

• 项目item的样式

order 改变顺序，会按照从小到大排列，默认值为0,

flex-grow 控制长胖的，分配多余空间，若值均为1，则平均分配，若是1、2、1，则分为4份。

flex-shrink 控制变瘦，默认值为1，平均变瘦，若要防止变瘦则可写0

若在后面元素加上margin-left:auto和在父元素写justify-content: space-between;效果一样。

重点

3. Grid布局

先设置相对应的基本“画纸表单”