三栏布局之圣杯布局

这篇博客主要是介绍一下三栏布局的圣杯布局；

圣杯布局与双飞翼布局实际上是差不多的，他们实现的都是三栏布局，两边的盒子宽度固定，中间的盒子自适应；也就是我们常说的固比固布局；两个布局方式实现的效果是一样的，区别在于实现的思想；

在了解了什么是三栏布局之后，我们主要来看一下圣杯模式的实现：

首先，先确定HTML的结构（先注意，写结构的时候，先写中间先渲染的盒子）

<header><h4>Header内容区</h4></header>
<div class="container">
<div class="middle"><h4>中间弹性区</h4></div> 
<div class="left"><h4>左边栏</h4></div> 
<div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>Footer内容区</h4></footer>

然后利用css进行一定的修饰：

*{
  margin:0;
  padding:0;
}
header{
  width: 100%;
  height: 40px;
  background-color:#666;
}
.middle{
  width: 100%;
  height: 200px; 
  background-color: #0b0;
  float: left;
}
.left{ 
  width: 200px;
  height: 200px;
  background-color: #e00;
  float:left;
}
.right{
  width: 200px;
  height: 200px;
  background-color: #00e;
  float:left;
}
.container::after{
  content: '';
  display: block;
  clear: both;
}
footer{
  width: 100%; 
  height: 40px;
  background-color:#666;
}

上面的css解释几点：

1、因为中间的盒子要自适应，所以设置的宽度为100%；

2、使元素浮动float：left；使元素向左浮动；（div的display原来是block，现在是inline-block）；是为了让元素挤在同一行；但是由于设置的是width：100%；所以后面的两个元素被挤到下一行；

3、使用伪元素清除浮动，因为浮动元素会产生浮动流，对不同的元素有不同的影响；同样可见文章float（浮动）模型来深入了解一下；

现在设置了此时的HTML和基本的css后，页面展现的是：

此时还没有实现三栏布局，因为左右边栏被挤到下一行，那么现在我们要将其拉上去；

我们需要：在.left上添加属性：margin-left：（负的上一个元素的宽度，这里的就是-100%）；

                 在.right上添加属性：margin-left：（负的自身元素的宽度，这里就是-200px）；

此时左右边栏被拉上去，如图：

但是会发现一个问题，原来中间弹性区这几个字去哪儿了？

其实就是被左边栏遮住了，意思就是说，这样直接把左右边栏拉上去，会覆盖中间宽度为100%的中间元素；

想办法解决：

        在父容器上添加内边距padding，这里设置为上下为0，左右为左右便懒得宽度，即padding：0  200px；

        （此时中间弹性区就被缩短；然后再对左右边栏进行相对定位，就会把原来覆盖的区域显现出来了）

         在.left上添加属性定位为position：relative；然后再将其向左移动left：（父元素padding所设置的值）-200px；

         在.right上添加属性同样定位为position：relative；然后将其向右移动right：（同上）-200px；

效果图：

现在就解决被遮挡的问题了；变成了三栏布局；左边栏、中间弹性区、右边栏；

这就是所谓的圣杯布局；