圣杯布局

有三个很重要的点：

1、中间margin的宽度可以自适应，随浏览器窗口改变而改变
2、main模块要放在文档流的前面，因为浏览器解析html是一行一行解析的，这样可以保证页面主题内容先被加载
3、使用现有的技术实现，并在各大主流浏览器之间相互兼容

圣杯布局的制作步骤

1.写下HTML代码，规定main、left、right的区域，并添加如下样式
html代码：


        main
        left
        right

css代码

.left {
    width: 300px;
    height: 400px;
    background-color: red;
}
.right {
    width: 300px;
    height: 400px;
    background-color: blue;
}
.main {
    height: 500px;
    background-color: pink;
}

image.png

规定三个容器.png

2.使三个区域都处于左浮动状态，并使main的宽度成父容器的100%

改造的后css代码：

.left {
    width: 300px;
    height: 400px;
    background-color: red;
}
.right {
    width: 300px;
    height: 400px;
    background-color: blue;
}
.main {
    width: 100%;
    height: 500px;
    background-color: pink;
}
.left,
.right,
.main {
    float: left;
}

image.png

设置浮动及main宽度100%.png

3.为两侧侧边栏添加负margin，用以调整位置，其中摆在左边的left的margin-left为-100%，而右边的right的margin-left则为负的其自身的宽度。（利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理）

改造后的css代码：

.left {
    width: 300px;
    height: 400px;
    background-color: red;
    margin-left: -100%;
}
.right {
    width: 300px;
    height: 400px;
    background-color: blue;
    margin-left: -300px;
}
.main {
    width: 100%;
    height: 500px;
    background-color: pink;
}
.left,
.right,
.main {
    float: left;
}

image.png

设置负margin使两个侧边栏向上移动.png

4.为class="container"的主容器设置左右margin值，使其为以后的侧边栏定位空出位置，margin的值为侧边栏的宽

改造后的css代码：

为了好看，我多设置了10px，用作隔开

.left {
    width: 300px;
    height: 400px;
    background-color: red;
    margin-left: -100%;
}
.right {
    width: 300px;
    height: 400px;
    background-color: blue;
    margin-left: -300px;
}
.main {
    width: 100%;
    height: 500px;
    background-color: pink;
}
.left,
.right,
.main {
    float: left;
}
.container {
    margin: 0 310px;
}

image.png

设置主容器的左右margin值.png

5.对left和right添加position:relative，然后对它们进行定位，移动到两侧，我们的圣杯布局就初步做完了，但是还有问题：
改造后的css代码:

.left {
    width: 300px;
    height: 400px;
    background-color: red;
    margin-left: -100%;
    left: -310px;
}
.right {
    width: 300px;
    height: 400px;
    background-color: blue;
    margin-left: -300px;
    left: 310px;
}
.main {
    width: 100%;
    height: 500px;
    background-color: pink;
}
.left,
.right,
.main {
    float: left;
    position: relative;
}
.container {
    margin: 0 310px;
}