关于圣杯布局的实现原理剖析

关于圣杯布局的实现原理剖析

参加了[全栈开发者] 【WEB前端全栈成长计划】，听了课程中老师讲布局案例时提到过圣杯布局，事后百度了一下，可能很多同学们和我一样刚第一次接触到“拥有姓名”的经典布局。仔细研究了一下各两种布局最终都是实现一个左中右的布局，左和右固定宽度，中间宽度100%自适应（如图1）。剖析一下圣杯布局的实现原理巩固学习效果。

图1 

一、实现圣杯布局的步骤

第1步：定义主体<div class=”main-body”>，设定主体div的padding左右边距，这里的边距是为左侧和右侧两个DIV预留的宽度（如图2）。

第2步：主体DIV内分别定义中间、左侧、右侧三个DIV（如图1）。

第3步：定义CSS样式

1、定义左侧<div class=”main-body-padding-left”>的margin-left:-100%使其与主体<div>同一行，然后设定left:-300px与主体<div>左侧宽度重叠（如图3）。

2、定义右侧<div class=”main-body-padding-right”>的margin-left:-300使其与主体<div>同一行，然后right:-300px使其与主体<div>右侧宽度重叠（如图4）。

图2

 图3

图4

二、实现圣杯布局的代码部份

HTML框架

<div class="main-body">
    <div class="main-body-center">中间</div>
    <div class="main-body-padding-left">左侧</div>
    <div class="main-body-padding-right">右侧</div>
</div>

CSS样式

<style>
    body{
        margin:0px;
        padding:0px;
        color:deeppink;
    }
    .main-body{
        margin:auto 40px;
        margin-top:10px;
        padding:0 300px 0 300px;
        background:red;
        overflow:hidden;
    }
    .main-body-center{
        float:left;
        width:100%;
        background-color:gray;
    }
    .main-body-padding-left{
        float:left;
        width:300px;
        margin-left:-100%;
        position:relative;
        left:-300px;
        background-color:yellow;
    }
    .main-body-padding-right{
        float:left;
        width:300px;
        margin-left:-300px;
        position:relative;
        right:-300px;
        background-color:blue;
    }
</style>

三、知识点总结

圣杯布局是利用负margin属性，margin-left: -100%，这里说的-100%是相对于父元素宽度而言，子元素margin-left: -100%就像向父元素移动，可以理解为两行，第一行宽度100%，第二行margin-left: -100%后即和第一行完全重叠，通过z-index的设置可以将第一行显示。

通过浏览器调试可以发现，当左侧div设定 z-index:1时，主体<div>定义的padding-left宽度就被显示出来了（如图5），当左侧取消z-index属性，布局恢复正常（如图6）。

图5

图6