圣杯布局

圣杯布局

所谓圣杯布局是前端开发中常用的布局方式也是面试常问的问题。所以必须掌握起来。主要是实现一个两侧宽度固定，中间宽度自适应的三栏布局。

实现步骤

1. 中间元素在布局时候在左右元素的上方
2. 三个布局元素都要向左浮动
3. 在父元素身上设置padding值，值的大小为左右盒子的宽度
4. 左盒子设margin-left：-100%，设置相对定位，移动盒子为了不挡住中间盒子
5. 右盒子设margin-right：-（盒子自身宽度）
6. 中间盒子设置width:100%，实现自适应
7. 设置最小宽度，让在宽度达到指定值以后布局不会乱

具体实现

1. 布局设置

<div class="container">
   <div class="center">主盒子</div>
   <div class="left">左盒子</div>
   <div class="right">右盒子</div>
</div>

2. 设置padding值

.container 
{
  height: 200px;
  padding: 0 200px;
  background-color: tomato;
}

3. 设置主盒子,和左右盒子基本样式

.center{
            float: left;
            width: 100%;
            height: 200px;
            background-color: thistle;
        }
.left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }
.right {
            float: left;
            height: 200px;
            width: 200px;
            background-color: chocolate;
        }

4. 为左盒子设置相对定位、负外边距

.left {
            position: relative;
            left: -200px;
            float: left;
            width: 200px;
            height: 200px;
            margin-left: -100%;/*重点*/
            background-color: chartreuse;
        }

设置相对定位是为了将盒子移动到事先准备好的padding值的范围内，实现不遮住主盒子内容

5. 为右盒子设置负外边距

.right {
            float: left;
            height: 200px;
            width: 200px;
            margin-right: -200px;
            background-color: chocolate;
        }

外边距的详细说明请点击这里

6. 设置最小宽度

   想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+200=400px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+200+200=600px

body {
            min-width: 600px;
        }

这样我们就实现了一个响应式的三栏布局形式