圣杯布局和双飞翼布局.md

圣杯布局和双飞翼布局都是经典的传统三栏布局实现方式，在html结构上都让中间content处在最前面，使它优先渲染。

• 1.首先对三个div标签使用float，让它达到一排效果;
• 2.但是，为了实现中间自适应，三行并不在一行；
• 3.我们使用负margin让三行拉到一个位置;

.left {
margin-left: -100%;
}
.right {
margin-left: - 150px;
}

• 4.但是此时增大content区域的内容会跑向两侧，我们想到使用margin或padding，这两者的不同就是圣杯布局和双飞翼布局的不同。

使用padding的圣杯布局

• 给父元素设置左右padding,大小为左右侧边栏的实际宽度。
• 然后使用position:relative,向左右两侧移动。
  使用这种方法要设置最小宽度，否则当页面宽度变小还是会换行，min-width=left_width*2+right_width
  使用margin的双飞翼布局
  双飞翼布局始于淘宝UED,由玉伯最先提出。这个布局在content区域增加一个content_text区域，为content_text设置左右margin