css布局的实现

圣杯布局

圣杯布局是指三列布局，中间宽度自适应，两边定宽。

    <div class="container">
      <div class="main"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>

.container {
  padding: 0 300px 0 200px;
}
.left,.main,.right {
  position: relative;
  min-height: 200px;
  float: left;
}
.left {
  width: 200px;
  left: -200px;
  margin-left: -100%;
  background-color: #f00;
  
}
.main {
  width: 100%;
  background-color: #0f0;
}
.right {
  width: 300px;
  right: -300px;
  margin-left: -300px;
  background-color: #00f;
}

双飞翼布局

和“圣杯布局”类似，只是不用相对定位。

    <div class="container">
      <div class="main">
        <div class="content"></div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>

.left,.main,.right {
  float: left;
  min-height: 200px;
}
.left {
  width: 200px;
  margin-left: -100%;
  background: #f00;
}
.main {
  width: 100%;
  background-color: #0f0;
}
.content {
  margin: 0 300px 0 200px;
}
.right {
  width: 300px;
  margin-left: -300px;
  background-color: #00f;
}

flex布局

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。

    <div class="container">
      <div class="main"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
    
.container {
  display: flex;
  min-height: 200px;
}
.main {
  flex-grow: 1;
  background-color: #0f0;
}
.left {
  order: -1;
  flex-basis: 200px;
  background-color: #f00;
}
.right {
  flex-basis: 300px;
  background-color: #00f;
}

绝对定位布局

绝对定位使元素的位置与文档流无关，因此不占据空间。

    <div class="container">
      <div class="main"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>

.container {
  position: relative;
}
.main,.right,.left {
  top: 0;
  height: 200px;
}
.main {
  margin: 0 300px 0 200px;
  background-color: #0f0;
}
.right {
  position: absolute;
  width: 300px;
  right: 0;
  background-color: #00f;
}
.left {
  position: absolute;
  width: 200px;
  background-color: #f00;
  left: 0;
}