【布局】圣杯布局&双飞翼布局

jonh_felix 发布于2019-08-29 13:27 / 1618人阅读

摘要：差别通俗点讲就是圣杯布局像是，杯子挂上两只耳朵，，所有容量都给了杯身，耳朵只能挂在两侧。双飞翼布局像是，鸟的双翼，，身子是鸟的一大部分，双翼也是身体的一部分。其他布局其他布局方案已经整理到此文中，欢迎大家前往指正整理布局方案

背景

随着前端技术的发展推进，web端的布局方式已基本成熟，那么在网站布局方式中，三列布局最为常用，布局方式也有很多，渐渐的开发者们开始从效率的角度优化自己的代码
“如果三排布局能将中间的模块放在dom树前面，那么浏览器在做重绘的时候不久有限显示了吗？”
机制的开发者们开始围绕者这个方向进行了dom的优化，于是诞生了两种著名的布局方式，圣杯布局和双飞翼布局

直奔主题

两种布局的背景就不讲了，直接上代码

圣杯布局

【JsFiddle】
https://jsfiddle.net/zwwill/px57xzp4/


    header
    
        main
        left
        right
    
    footer

.container {width: 500px; margin: 50px auto;}
.wrapper {padding: 0 100px 0 100px;}
.col {position: relative; float: left;}
.header,.footer {height: 50px;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}

双飞翼布局

ps:
“这不是一样的图嘛？”
“对！就是一样的，因为是解决同一种问题的嘛。”

【JsFiddle】
https://jsfiddle.net/zwwill/5xjyeu9d/


    header
    
        
            main
        
        left
        right
    
    footer

.col {float: left;}
.header {height: 50px;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
.footer {height: 50px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}

差别

通俗点讲就是

圣杯布局像是，杯子（wrapper）挂上两只“耳朵”（left，right），所有容量都给了杯身（main），耳朵只能挂在两侧。
双飞翼布局像是，鸟（wrapper）的双翼（left，right），身子（main）是鸟的一大部分，双翼也是身体的一部分。

虽然比较抽象，但有助于对两种布局的区分。实在看不懂就就代码吧，本人“扯”的功力不太够。

其他布局

其他布局方案已经整理到此文中，欢迎大家前往指正

【整理】CSS布局方案

服务器托管海外云主机圣杯布局双飞翼布局 div布局布局html 排版布局

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

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

【布局】圣杯布局&amp;双飞翼布局

摘要：差别通俗点讲就是圣杯布局像是，杯子挂上两只耳朵，，所有容量都给了杯身，耳朵只能挂在两侧。双飞翼布局像是，鸟的双翼，，身子是鸟的一大部分，双翼也是身体的一部分。其他布局其他布局方案已经整理到此文中，欢迎大家前往指正整理布局方案背景随着前端技术的发展推进，web端的布局方式已基本成熟，那么在网站布局方式中，三列布局最为常用，布局方式也有很多，渐渐的开发者们开始从效率的角度优化自己的代码...

LeviDing 2019-08-01 17:36 评论0 收藏0
圣杯布局和双飞翼布局

摘要：解决的问题圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。解决的问题圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局圣杯布局dom结构：圣杯布局 ...

yankeys 2019-08-29 13:54 评论0 收藏0
两招搞定三栏布局——圣杯布局、双飞翼布局

摘要：如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局这是一道经典的面试题，常用的方法是圣杯布局双飞翼布局。相信看完这篇文章，你就能很清楚的知道什么是圣杯和双飞翼了。在双飞翼中避免左右盒子被覆盖，是通过设置的左右来实现的。如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...

Kaede 2019-08-29 16:19 评论0 收藏0
CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局

摘要：圣杯布局双飞翼布局所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。双飞翼用在外层多加了一个然后改用。前言我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。直到最近我面试，面试官说我css3理解的不熟，我起初很不屑，但后来静...

zqhxuyuan 2019-08-30 14:11 评论0 收藏0
圣杯布局和双飞翼布局

摘要：参考文章同学的关于圣杯布局，圣杯布局和双飞翼布局的区别经典布局圣杯布局实现的效果主要在中，和固定宽度，首先渲染，且自适应宽度。 ps: 参考文章 DotHide同学的关于圣杯布局，圣杯布局和双飞翼布局的区别经典布局圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

ZweiZhao 2019-08-29 16:13 评论0 收藏0