彻底弄懂圣杯布局（margin-left=-100%的）

首先，html页面代码结构如下

<div style="width: 1000px">
    <div id="container">
        <div id="center">中间的</div>
        <div id="left">左边的</div>
        <div id="right">右边的</div>
    </div>
</div>

这里设置容器宽度为50%是为了更好的演示

首先设置容器css样式

    #container{
        width: 50%;
        height: 720px;
        background-color: pink;
        padding:0 200px 0 100px;
    }

得到页面效果如下

因为background的颜色在内边距中也有效，可能你看不出我已经在中间挖了一个槽，这个槽距离左边界为100px；右边界为200px；接下来我让这个槽更加明显一点。在左右中三栏中我们优先选择渲染中间栏

    #center{
            width: 100%;
            height: 600px;
            float: left;
            background-color: blue;
        }

此时页面效果如下所示

然后渲染左右两栏

        #left{
            float: left;
            width: 100px;
            height: 600px;
            background-color: rebeccapurple;
        }
        #right{
            float: left;
            width: 200px;
            height: 600px;
            background-color: lightgray;
        }

 

这时我们看到，由于中间栏的宽度设置成了100%，左右两栏被挤了下去。我们用负外边距的方法将左右两栏提上来。

css代码如下

        #left{
            margin-left: -100%;
            float: left;
            width: 100px;
            height: 600px;
            background-color: rebeccapurple;
        }
        #right{
            margin-right: -200px;
            float: left;
            width: 200px;
            height: 600px;
            background-color: lightgray;
        }

此时效果如下

可以看到我们基本已经完成了，只是左边栏没有到应有的位置，需要平移，相对于自身位置平移最好的方法就是relative定位了。

给left加上平移

        #left{
            position: relative;
            left: -100px;
            margin-left: -100%;
            float: left;
            width: 100px;
            height: 600px;
            background-color: rebeccapurple;
        }

问题来了问题来了？

为什么left不和right一样直接设置个margin-left一步到位呢？

我们首先理解一下margin-left的字面意思。

在同级之间，它是指元素的右外边距和其右边元素的左外边距的距离。

在父子之间，它是指元素的左外边距和其父级元素的左内边距的距离。

差别。我们首先先回到这一步时的页面情况

如果我们想把紫色的这一块放到它应该有的位置，那么margin-left应该设置成什么？父子元素，margin-left设置的是元素的左外边距和父元素的右内边距的距离。那么我们如果想把紫色放到蓝色的左边，看图示

所以margin-left应该设置成负的150+蓝色区域的宽度！但是问题出现了。蓝色区域的宽度是自适应的，也就是说是可变的。所以我们如果要实现三栏布局。只能使用position：relative来曲线救国啦。

 

测试效果

 

最终的css代码如下

        #container{
            width: 50%;
            background-color: pink;
            height: 700px;
            padding: 0 200px 0 100px;
        }
        #center{
            width: 100%;
            height: 600px;
            float: left;
            background-color: blue;
        }
        #left{
            position: relative;
            left: -100px;
            margin-left: -100%;
            float: left;
            width: 100px;
            height: 600px;
            background-color: rebeccapurple;
        }
        #right{
            margin-right: -200px;
            float: left;
            width: 200px;
            height: 600px;
            background-color: lightgray;
        }