前端css：“圣杯布局”

昨天面试前端，一面危险通过，面试官建议我看看“圣杯布局”，听起来很玄妙的名字，花了一晚上弄明白怎么回事，惊讶于前端工作的细节和技巧！

我先看几个基础，在后面要用到的：

1.CSS right/left 属性

right/left属性规定元素的右/左边缘。定义了定位元素右/左外边，与其包含块右/左边界之间的偏移。

right:50px：设置元素位置，使其右边缘距离其包含元素的右边缘5。它的右边和包含它的元素的右边之间的距离5px；

    <html>

    <head>

        <style type="text/css"></style>

        <meta charset="UTF-8">

        <style type="text/css">

        .left {

            position:absolute;

            background: red;

            right: 10px;

        }

        </style>

    </head>

    <body>

            <div class="left">

                pppppppppppp<br />

            </div>

        </div>

    </body>

    </html>

元素位于最右侧距离窗口右侧10px处；

2.margin-left:-100% 这种表示中负数什么意思？

先看一个例子：

    <html>

    <head>

        <style type="text/css"></style>

        <meta charset="UTF-8">

        <style type="text/css">

        .center {

            float:left;

            width:600px;

            background:red;

        }

        .left {

            float:left;

            width:170px;

            background:blue;

            border:1px solid green;

        }

        </style>

    </head>

    <body>

        <div class="wrap">

            <div class="center">

                <div class="box">

                    tttttttttttttt<br />

                    tttttttttttttt<br />

                    tttttttttttttt<br />

                    tttttttttttttt<br />

                    tttttttttttttt<br />

                    tttttttttttttt<br />

                    tttttttttttttt<br />

                    tttttttttttttt<br />

                    tttttttttttttt<br />

                </div>

            </div>

            <div class="left">

                pppppppppppp<br />

                pppppppppppp<br />

                pppppppppppp<br />

                pppppppppppp<br />

                pppppppppppp<br />

            </div>

        </div>

    </body>

    </html>

我们知道，浮动的元素，只有在位置不够的时候才会被挤到第二行。上面两个div都有足够的位置，所以排在一行没有换行：

使用margin-left:-600px;后是这样：

        <style type="text/css">

        .center {

            float:left;

            width:600px;

            background:red;

        }

        .left {

            float:left;

            width:170px;

            background:blue;

            border:1px solid green;

            margin-left:-600px;

        }

        </style>

margin-left：10px 是左边距10px，效果是content向右移10px，那么-10px就是content，就是蓝色块向左移10px；

这里刚好移动-600px达到红色box的左边！

如果红色块如果宽度设置为100%，蓝色块只浮动，不使用margin左负值，后面的元素是会被挤在第二行的。

        <style type="text/css">

        .center {

            float:left;

            width:100%;

            background:red;

        }

        .left {

            float:left;

            width:170px;

            background:blue;

            border:1px solid green;

        }

        </style>

如果把宽度设为-100%：

        <style type="text/css">

        .center {

            float:left;

            width:100%;

            background:red;

        }

        .left {

            float:left;

            width:170px;

            background:blue;

            border:1px solid green;

            margin-left:-100%;

        }

        </style>

我们可以通过以上方式，让红色box的width=100%，自适应窗口大小，然后让左右两边通过负边距来放置两个box；实现如下：

下面，我们尝试实现“圣杯布局”

利用浮动元素的负边距来定位，代码如下：

<html>

<head>

<meta content="text/html; charset=utf-8" />

<style type="text/css">

    body{

        min-width: 800px;

        text-align: center;

    }

    #head{

        background:green;

        clear:both;

    }

    #footer{

        background:red;

        clear:both;

    }

    #container{

        overflow: auto;

    }

    .column{

        float:left;

        min-height: 300px;

    }

    #center{

        background:blue;

        width: 100%;

    }

    #left{

        background:green;

        width:190px;

        margin-left:-100%;

    }

    #right{

        background:yellow;

        width: 190px;

        margin-left: -190px;

    }

</style>

</head>

<body>

    <div id="head">

        <h1>head</h1>

    </div>

    <div id="container">

        <div id="center" class="column">center</div>

        <div id="left" class="column">left</div>

        <div id="right" class="column">right</div>

    </div>

    <div id="footer">

        <h1>footer</h1>

    </div>

</body>

</html>

现在，通过简单的负边距，已经让left和right定位到正确的位置，剩下的问题是如何让center也定位到正确的位置（现在center是100%铺满的，第一个想法就是在center两侧预留两块位置给left 和 right）：

试着给container添加padding:

    #container{

        overflow: auto;

        padding: 0 190px 0 190px;

结果现在center定位正确了，left和right位置不对了！如何修改left和right？
我们尝试在其现有位置上进行偏移，用position: relative！

    #left{

        background:green;

        width:190px;

        margin-left:-100%;

        position: relative;

        left: -190px;

    }

    #right{

        background:yellow;

        width: 190px;

        margin-left: -190px;

        position: relative;

        right: -190px;

    }

相对其原来位置再进行偏移：

基本上效果出来了！
不过感觉用former也可以达到这个效果！求讨论。

巴特西

前端css：“圣杯布局”

最新文章

热门文章