页面布局

两栏布局

左侧盒子绝对定位，设置固定宽度；左侧盒子宽度100%，使用padding-left设置左边距，实现两栏布局。

index.html

<div class="wrap">
    <div class="item">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="item">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="item">
      <div class="left"></div>
      <div class="right"></div>
    </div>
</div>

index.css

body {
  margin: 0;
}

.wrap {
  width: 375px;
  height: 300px;
  border: 1px solid #000;
  margin: 10px auto;
}

.item {
  position: relative;
  height: 100px;
  border: 1px solid #000;
  box-sizing: border-box;
}

.item .left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100%;
  background-color: orange;
  box-sizing: border-box;
}

.item .right {
  width: 100%;
  height: 100%;
  padding-left: 100px;
  background-color: green;
  box-sizing: border-box;
}

三栏布局

圣杯布局

布局时，中间盒子必须在最上方；
父级设置默认左边距和右边距，中间盒子宽度占满父级元素；
左侧盒子设置left为父级默认的左边距的负值，同时设置左外边距-100%；
右侧盒子设置right和左外边距为父级默认的右边距的负值；

index.html

<div class="container">
  <div class="column middle"></div>
  <div class="column left"></div>
  <div class="column right"></div>
</div>

index.css

html,
body,
.container {
  height: 100%;
  margin: 0;
}

.container {
  margin: 0 200px 0 150px;
}

.container .column {
  float: left;
  position: relative;
  height: 100%;
}

.container .middle {
  width: 100%;
  background-color: green;
}

.container .left {
  left: -150px;
  width: 150px;
  margin-left: -100%;
  background-color: orange;
}

.container .right {
  right: -200px;
  width: 200px;
  margin-left: -200px;
  background-color: red;
}

双飞翼布局

中间盒子设置宽度100%，设置其内层盒子固定的左边距和右边距；
左侧盒子设置左外边距为-100%；
左侧盒子设置已定义的固定右边距的负值即可；

index.html

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

index.css

html,
body,
.container {
  height: 100%;
  margin: 0;
}

.container .column {
  float: left;
  height: 100%;
}

.container .middle {
  width: 100%;
  background-color: orange;
}

.container .middle .main {
  height: 100%;
  margin: 0 200px 0 150px;
}

.container .left {
  width: 150px;
  margin-left: -100%;
  background-color: gray;
}

.container .right {
  width: 200px;
  margin-left: -200px;
  background-color: blue;
}