CSS常见布局

双列布局：一列固定宽度，另外一列自适应宽度
实现思路：浮动元素 + 普通元素margin(右边时自适应同理)

  <style>
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: left;
    }
    .main{
      margin-left: 210px;
      height: 400px;
      background: red;
    }
  </style>
    <div class="aside">aside</div>
    <div class="main">content</div>

三列布局：两侧两列固定宽度，中间列自适应宽度
实现原理：浮动元素 + 普通元素margin(同样记住渲染顺序，自适应放最后，浮动元素放前两位)

<style>
    .menu{
      width: 100px;
      height: 500px;
      background: pink;
      float: left;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;
    }
    .main{
      margin-left: 110px; /*为什么要加margin-left*/
      margin-right: 210px;
      height: 400px;
      background: red;
    }

</style>

    <div class="menu">menu</div>
    <div class="aside">aside</div>
    <div class="main">content</div>

水平等距排列

<style>
*{
  padding:0px;
  margin:0px;
}

.ct{
    width:640px;
  background:red;
  overflow:hidden
}


li{
  width:200px;
  height:200px;
  background:yellow;
  float:left;
  margin-left:20px;
  border:none;
}

ul{
  list-style:none;
  margin-left:-20px;
}
</style>
<div class="ct">
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
</div>

PS：外部必须还有一个父级容器包裹，给予宽度属性，此外层使用margin负值调整状态