13518219792
这篇文章给大家分享的是有关CSS圣杯布局是什么意思的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
创新互联公司主营夹江网站建设的网络公司,主营网站建设方案,App定制开发,夹江h5微信小程序开发搭建,夹江网站营销推广欢迎夹江等地区企业咨询
在CSS中，圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；三栏全部使用“float:left”浮动，并配合left和right属性。
前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握。
事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。
通过缩放页面就可以发现，随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子固定不变，即使页面宽度变小，也不影响我们的浏览。注意：当你缩放页面的时候，宽度不能小于700PX，为了安全起见，最好还是给body加一个最小宽度!
如果你有了那么一点理解以后，我们来看看圣杯布局的实现：
注：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圣杯布局是什么意思就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！
