三种方式实现圣杯布局

cgspine 发布于2019-08-30 13:58 / 3105人阅读

摘要：本文会用三种方法来实现圣杯布局，分别是浮动，以及。先移动左边，新加一个样式。小结总的来说，我认为使用弹性盒子布局实现圣杯模式是最方便最快速且不用担心移动端的适配问题。

圣杯布局的三种实现

圣杯布局是一种很常见的css布局。他要求：

上部和下部各自占领屏幕所有宽度。

上下部之间的部分是一个三栏布局。

三栏布局两侧宽度不变，中间部分自动填充整个区域。

中间部分的高度是三栏中最高的区域的高度。

本文会用三种方法来实现圣杯布局，分别是浮动，flexbox以及css grid。

浮动实现 实现原理

外层框架

这里是头部

这里是底部

.header,.footer{
    height:200px;
    width:100%;
    background:red;
}
.container{
    padding-left:200px;
    padding-right:300px;
}

填充三栏

这一步骤，首先给底部区域清除浮动，防止跟随上边的区域一起浮动。
另外：把中，左，右三个区域设置成度浮动。给左右两块区域固定的宽度，中间部分的宽度设置成100%。

这样实现下来，因为浮动的关系，[middle]会占据[container]的所有部分，而左右两块区域都会被挤到下面，但是，由于第一步设置了内边距的关系，[container]的左右各剩余了一块区域，且宽度与左右区域相同。

这里是头部

    中间部分
    左边
    右边

这里是底部


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    width:300px;
    background:aqua;
}

移动左侧区域

接下来要做的就是把左右两块区域挪到空出来的内边距空间里去。

先移动左边，新加一个样式 margin-left:-100%。这样一来，因为浮动关系，就把左边块上移到了[middle]左侧，与其交织在一起，而右侧栏就自动往左移动。然后再给左侧栏一个偏移量，偏移量恰好是其宽度，这一步要给[container]的position设成relative

这里是头部

    中间部分
    左边
    右边

这里是底部


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
}

移动右边

同上一步的原理一样，把右侧区域也给弄上去，设置负外边距和本身宽度相同就行了。

这里是头部

    中间部分
    左边
    右边

这里是底部


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
    margin-right:-300px;
}

特别完美~

flexbox弹性盒子实现

弹性盒子用来实现圣杯布局特别简单。只需要把中间的部分用flex布局即可。

这里是头部

    左边
    中间部分
    右边

这里是底部


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.container{
    display: flex;
}
.middle{
    flex: 1;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    background: aqua;
    width:300px;
}

很简单，在写html的时候，因为不再涉及到浮动，只需要按照左中右的顺序来写就可以了。左右两块区域的宽度写死，把中间的区域的flex属性设置成1就可以了。

css grid网格

grid是一种新的布局方式，截止2018年初，绝大多数浏览器都已经支持css grid。
其原理就是把页面的区域划分成一个一个的网格，就和围棋的棋盘一样。

用网格来解决圣杯问题，可以摆脱弹性盒子时需要格外加一个[container]的问题，也就是左中右三款区域不需要在他们外边包装一个额外的div。

先看一下代码：

header
left
middle
right     
footer
   


body{
    display: grid;
}
#header{
    background: red;
    grid-row:1;
    grid-column:1/5;
}
    
#left{
    grid-row:2;
    grid-column:1/2;
    background: orange;
}
#right{
    grid-row:2;
    grid-column:4/5;
    background: cadetblue;
}
#middle{
    grid-row:2;
    grid-column:2/4;
    background: rebeccapurple
}
#footer{
    background: gold;
    grid-row:3;
    grid-column:1/5;
}

简单说一下代码的实现。回头会专门看一下css grid的细节。

首先给最外层的body设成display:grid。当然，是外层父级元素即可，不一定是body。

grid-row就是说由上到下，#header占据第1格，#left,#middle,#right占据第2格，#footer占据第3格。

而grid-column表示，在横向从左向右，分成了五格。其中#header和#footer占据全部。#left占据第1格，#middle占据第2到第4格，#right占据第5格。

不管是实现起来还是理解起来都很方便。
关于css grid，下次继续总结。

小结

总的来说，我认为使用弹性盒子布局实现圣杯模式是最方便最快速且不用担心移动端的适配问题。而css grid网格，并不是所有浏览器都支持，所以，暂时不太建议大规模使用。至于，第一种方法，面试的时候准备准备还是很有好处的。

云服务器 GPU云服务器圣杯布局 ddos三种攻击方式服务器的三种存储方式阿里云发送邮件的三种方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115672.html

四种方法实现──三栏布局（圣杯布局、双飞翼布局）

摘要：圣杯布局双飞翼布局本质上都是三栏布局中间自适应两边固定宽。二说明网上有人提到这个方法在某些情况下会出现，具体没有深入了解过。这个方法兼容性有比较大的问题，网上有不少文章提到浏览器还没有提供支持，实际上新版主流浏览器已经支持了。圣杯布局、双飞翼布局,本质上都是三栏布局──中间自适应两边固定宽。有一次面试，要求写出三种实现方式，结果只写出了两种，面试官说基础还不够扎实~呜圣杯布局圣杯...

wqj97 2019-08-23 15:16 评论0 收藏0
四种方法实现──三栏布局（圣杯布局、双飞翼布局）

摘要：圣杯布局双飞翼布局本质上都是三栏布局中间自适应两边固定宽。二说明网上有人提到这个方法在某些情况下会出现，具体没有深入了解过。这个方法兼容性有比较大的问题，网上有不少文章提到浏览器还没有提供支持，实际上新版主流浏览器已经支持了。圣杯布局、双飞翼布局,本质上都是三栏布局──中间自适应两边固定宽。有一次面试，要求写出三种实现方式，结果只写出了两种，面试官说基础还不够扎实~呜圣杯布局圣杯...

callmewhy 2019-08-02 14:16 评论0 收藏0
CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

includecmath 2019-08-29 12:17 评论0 收藏0
前端面试之CSS总结(上)

摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 评论0 收藏0
CSS中的负边距

摘要：之后仔细的百度了一下，发现了这么一个叫做内外补丁负值法的东西。在这个解决方案中，又涉及到了传说中的负。深入研究之后又发现了圣杯布局双飞翼布局等很多示例，确实要好好研究负边距这个东西了。相关推荐那些年，奇妙的圣杯与双飞翼，还有负边距 2015-04-22 时候写的老文，因为希望引用所以拿了出来。那天被一个同学问了一个问题，三列的div，要求父div的高度和三个div的高度都和三个中字数...

cocopeak 2019-08-29 10:57 评论0 收藏0