CSS圣杯布局是什么意思

　　介绍

这篇文章给大家分享的是有关CSS圣杯布局是什么意思的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

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

前端的两个经典布局想必大家都有多了解——圣杯布局和双飞翼布的局,因为它既能体现你懂HTML结构又能体现出你对DIV + CSS布局的掌握。

事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布的局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的,差别在于其实现的思想。

通过缩放页面就可以发现,随着页面的宽度的变化,这三栏布局是中间盒子优先渲染,两边的盒子框子固定不变,即使页面宽度变小,也不影响我们的浏览。<代码>注意:当你缩放页面的时候,宽度不能小于700 px,为了安全起见,最好还是给身体加一个最小宽度!
如果你有了那么一点理解以后,我们来看看圣杯布局的实现:

注:复位部分的代码大家自行添加

1, HTML结构:

& lt; header> 　　& lt; h5>头内容区& lt;/h5> 　　& lt;/header> 　　& lt; div类=癱ontainer"祝辞 　　& lt; div类=癿iddle"祝辞 　　& lt; h5>中间弹性区& lt;/h5> 　　& lt;/div> 　　& lt; div类=發eft"祝辞 　　& lt; h5>左边栏& lt;/h5> 　　& lt;/div> 　　& lt; div类=皉ight"祝辞 　　& lt; h5>右边栏& lt;/h5> 　　& lt;/div> 　　& lt;/div> 　　& lt; footer> 　　& lt; h5>页脚内容区& lt;/h5> 　　& lt;/footer>

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

2, css样式:

头{ 　　宽度:100%;高度:40像素; 　　background - color: # 8 ecfd4; 　　} 　　.container { 　　溢出:隐藏; 　　} 　　.middle { 　　宽度:100%; 　　background - color: # f7f537; 　　浮:左; 　　} 　　.left { 　　宽度:200 px; 　　background - color: # 37 f7c8; 　　浮:左; 　　} 　　铃声{ 　　宽度:200 px; 　　background - color: # eb6100; 　　浮:左; 　　} 　　页脚{ 　　宽度:100%; 　　高度:30 px; 　　background - color: # 8 ecfd4; 　　}

此时的效果图:

CSS圣杯布局是什么意思

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

现在我们需要做的是将左栏放到左侧,右栏放到右侧。那么我们就需要CSS的负利润了。

3,利用负边距布局

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

。正确的{ 　　margin-left: -200 px; 　　}

此时的效果图

CSS圣杯布局是什么意思

实现固比固布局

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

.middle { 　　宽度:100%; 　　身高:200 px; 　　background - color: # f7f537; 　　浮:左; 　　} 　　.left { 　　宽度:200 px; 　　身高:200 px; 　　background - color: # 37 f7c8; 　　浮:左; 　　} 　　铃声{ 　　宽度:200 px; 　　身高:200 px; 　　background - color: # eb6100; 　　浮:左; 　　}

CSS圣杯布局是什么意思

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

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

.container { 　　填充:0 200 px; 　　}

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

效果如下:

CSS圣杯布局是什么意思

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

CSS圣杯布局是什么意思