CSS什么是圣杯布局？

在CSS中，圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；三栏全部使用“float:left”浮动，并配合left和right属性。

如果你有了那么一点理解以后，我们来看看圣杯布局的实现：

注：reset部分的代码大家自行添加

1、HTML结构：

    
Header内容区


    

        
中间弹性区
    
    

        
左边栏
    
    

        
右边栏
    

有人可能会有疑惑，为什么中间的主体部分要写在最前面。因为中间盒子是要被优先渲染嘛~并且设置其自适应，也就是width:100%。

2、css样式:

header{
    width: 100%;    height: 40px;
    background-color: #8ecfd4;
}
.container{
    overflow:hidden;
}
.middle{
    width: 100%;
    background-color: #f7f537;
    float:left;
}
.left{ 
    width: 200px;
    background-color: #37f7c8;
    float:left;
}
.right{
    width: 200px;
    background-color: #eb6100;
    float:left;
}
footer{
    width: 100%; 
    height: 30px;
    background-color: #8ecfd4;
}

此时的效果图：

这时中间的三栏并没有在一行内显示，原因也很明确。三栏都浮动起来了，但是middle栏的宽度设置成了100%，到时左右两边的撑不下换行显示了。

现在我们需要做的是将left栏放到左侧，right栏放到右侧。那么我们就需要css的负margin了。

3、利用负边距布局

让左边的盒子上去

.left{
    margin-left:-100%;
}

让右边的盒子上去

.right {
    margin-left:-200px;
}

此时的效果图

实现固比固布局

虽然现在貌似已经实现了我们想要的布局，但是在中间填充内容的时候我们还是会发现问题。这一步我们也将中间的主体部分给一个高度，方便视觉效果。

.middle{
    width: 100%;
    height: 200px; 
    background-color: #f7f537;
    float:left;
}
.left{    
    width: 200px;
    height: 200px;
    background-color: #37f7c8;
    float:left;
}
.right{
    width: 200px;
    height: 200px;
    background-color: #eb6100;
    float:left;
}

从上面的效果图可以看出，middle栏的内容被两边的部分遮挡住的，这并不是我们想要的，所以我们的工作还得继续。

4、让中间自适应的盒子安全显示（利用父级元素设置左右内边距的值，把父级的三个子盒子往中间挤。）

.container{ 
    padding: 0 200px;
}

这里的200px是左右盒子的宽度。

效果如下：

利用父级的内边距将盒子往中间挤

我们可以看到，左右两边的内边距是有了，但是中间盒子上的内容还是被压着。

5、左右两边分开来（给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。）

.left{ 
    position: relative; 
    left: -200px;
}
.right{
    position: relative;
    right: -200px;
}

看最终效果图

现在我们的圣杯布局就OK啦！实现了我们要的效果，左右侧的盒子固定，中间盒子自适应，而且中间盒子的内容完全不受影响。希望对大家有帮助。

更多编程相关知识，请访问：编程学习！！

以上就是CSS什么是圣杯布局？的详细内容，更多请关注 第一PHP社区 其它相关文章！