摘要：圣杯和双飞翼布局介绍最近正好碰到了写这种布局，一直没有总结过正好借这次机会总结一波，同时加强一下自己的理解。使用双飞翼布局就可以避免这个问题。双飞翼布局则是中间栏不变，将内容部分为两边腾开位置参考
圣杯和双飞翼布局介绍
最近正好碰到了写这种布局，一直没有总结过正好借这次机会总结一波，同时加强一下自己的理解。
博客链接：http://www.xluos.com/index.ph...
圣杯布局和双飞翼布局作为经典的三栏式布局是面试中的常客。两种布局达到效果上基本相同，都是两边两栏宽度固定，中间栏宽度自适应。在HTML结构上中间栏在最前面保证了最先渲染中间提升性能（因为这两种布局都比较老，我认为在现代浏览器中这点儿性能优化效果并不是很大），并且兼容性良好。两种布局的实现方法前半部分相同，后半部分的实现各有利弊，下面会简单介绍两者的区别。
Demo和代码圣杯布局Demo、代码
双飞翼布局Demo、代码
两种布局的实现首先，既然是三栏式布局我们需要三个div
圣杯布局 mainleftright
给main设置width: 100%,让它始终占满窗口，这样才有自适应的效果。
然后我们给它加上点儿样式区分，效果如下：
为了形成在一行三栏布局，给三个方块都加上浮动float: left;（注意清除浮动，因为浮动会导致父元素高度塌陷）
接着我们要把三个方块拉到一行，这里要利用负margin的技巧。
left要放到main的左边，设置margin-left: -100%,因为margin的百分比是相对与父元素的，所以需要整整一行的宽度才能补偿这个margin的值，所以left就能到main的左边。
接着让right到main的右边，只需要设置margin-left的值为负的right的宽，比如margin-left: -200px;，正好使main重叠right的宽度，因为设置了浮动所以right就会到main的右边了。
下面我们来看一下效果：
看样子好像我们已经成功达到了效果？不要急给两个方块变透明，再给中间加点儿内容看看。
我们发现当内容变多之后，因为三个方块都是设置的浮动，脱离的文档流，两边固定宽度的两栏会挡住我们的内容。
所以要想两边不遮挡内容，就需要中间栏给两边的位置腾出来。我们可以想到padding和margin都可以用来腾出位置，这两个属性就是圣杯布局的双飞翼布局的区别，不过双飞翼布局还需要稍微改造一下HTML的结构，这个等一下再说。
1.圣杯布局——使用padding属性第一步：为三个元素的父元素加上padding属性，腾开位置
第二步：由于腾开位置后会产生空白，所以使用position: relative;属性来移动左右两栏，这样就不会遮挡了。
不过这样布局有一个问题就是：有一个最小宽度，当页面小于最小宽度时布局就会乱掉。所以最好给body设置一个min-width。这个min-width肯定不能是试出来的，怎么计算呢？就是left-width * 2 + right-width，至于为什么，简单的说就是：“由于设置了相对定位，所以当left原来的位置和right的位置产生重叠时，由于浮动的原因一行放不下就会换行”。所以布局就被打乱了。使用双飞翼布局就可以避免这个问题。
2.双飞翼布局——使用margin属性首先我们要对HTML结构稍微改变一下：
双飞翼布局 mainleftright
可以看到，我们在main里面又加了一个内容层。如果知道盒子模型，就知道我们是不能直接给main添加margin属性，因为我们已经设置了width：100%，再设置margin的话就会超过窗口的宽度，所以我们再创造一个内容层，将所有要显示的内容放到main-content中，给main-content设置margin就可以了。
因为不改变父元素所以只需要给main-content设置margin: 0 200px 0 200px;属性就可以了达到效果
两种布局的区别
圣杯布局是中间栏为两边腾开位置。
双飞翼布局则是中间栏不变，将内容部分为两边腾开位置
https://www.cnblogs.com/lovem...
https://www.zhihu.com/questio...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51846.html
摘要：圣杯和双飞翼布局介绍最近正好碰到了写这种布局，一直没有总结过正好借这次机会总结一波，同时加强一下自己的理解。使用双飞翼布局就可以避免这个问题。双飞翼布局则是中间栏不变，将内容部分为两边腾开位置参考 圣杯和双飞翼布局介绍 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了写这种布局，一直没有总结过...
摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理 标签 ： 前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...
摘要：如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局这是一道经典的面试题，常用的方法是圣杯布局双飞翼布局。相信看完这篇文章，你就能很清楚的知道什么是圣杯和双飞翼了。在双飞翼中避免左右盒子被覆盖，是通过设置的左右来实现的。 如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...
摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。 本文首发于知乎专栏：前端指南 CSS布局 布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...
摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。 三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...
阅读 632·2021-11-24 09:39
阅读 3477·2019-08-30 15:53
阅读 2508·2019-08-30 15:44
阅读 3236·2019-08-30 12:54
阅读 2205·2019-08-29 12:23
阅读 3303·2019-08-26 14:05
阅读 2100·2019-08-26 13:36
阅读 3428·2019-08-26 13:33
