引言

圣杯布局和双飞翼布局都是比较经典的三栏布局，两种布局的页面效果基本相同。两种布局都是两侧宽度固定， 中间宽度自适应 且 中间内容优先渲染 的三栏布局。

本文主要记录了圣杯布局的结构和样式。

圣杯布局

圣杯布局DOM结构

<header>this is the header</header>

 <main> <div class="center">this is the center</div> <div class="left">this is the left</div> <div class="right">this is the right</div> </main> <footer>this is the footer</footer>

内容区域main包含三个div标签，class分别为center、left、right。（顺序很重要，center一定要放到最前面，确保其优先渲染）

圣杯布局样式

第一步，将内容区域设置padding，为左右两栏留出空间。并设置内容区域的各栏宽度，中间栏宽度 100%，让其自适应，两边栏宽度固定。（宽 / 高根据实际情况设置，这是数值是为了演示方便）

		main{
            padding-left: 200px; 
            padding-right: 150px;
        }
        .center {
            width: 100%;
            height: 200px;
        }
        .left {
            width: 200px; 
            height: 200px;
        }
        .right {
            width: 150px; 
            height: 200px;
        }

页面效果：

第二步，为三栏分别添加 float: left; （为了演示效果，添加了背景颜色）

修改后的CSS代码如下：

 		.center {
 			float: left;
            width: 100%;
            height: 200px;
            background-color: orange;
        }
        .left {
        	float: left;
            width: 200px; 
            height: 200px;
            background-color: red;
        }
        .right {
        	float: left;
            width: 150px; 
            height: 200px;
            background-color: green;
        }

页面效果： 第三步，通过 margin-left: -100%; 结合相对定位 right: 200px;，设置左边栏。

修改后的CSS代码如下：

        .left {
            float: left;
            width: 200px; 
            height: 200px;
            margin-left: -100%;
            position: relative;
            right: 200px;
            background-color: red;
        }

页面效果： 第四步，通过 margin-right: -150px，设置右边栏，完成圣杯布局。

修改后的CSS代码如下：

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

圣杯布局最终页面效果： 完整CSS代码：

        body {
            min-width: 550px;
        }
        header, footer{
            height: 50px;
            background-color: #ccc;
            clear: both;
        }
        main{
            padding-left: 200px; 
            padding-right: 150px;
            height: 200px;
        }
        .center {
            float: left;
            width: 100%;
            height: 200px;
            background-color: orange;
        }

        .left {
            float: left;
            width: 200px; 
            height: 200px;
            margin-left: -100%;
            position: relative;
            right: 200px;
            background-color: red;
        }

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

圣杯布局总结

• 第一步，将内容区域设置padding，为左右两栏留出空间；
• 第二步，给三栏添加浮动；
• 第三步，通过 margin-left: -100%; 结合相对定位 right自身宽度，完成左边栏；
• 第四步，通过 margin-right 负自身宽度，完成右边栏；

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！