圣杯布局、双飞翼布局的理解及对比
一、圣杯布局
1.圣杯布局的DOM结构如下：
圣杯特点简单记为：有头、有尾、包三列，圣杯布局中间是有container大容器包裹着左中右区域的。
<!--特点：有头、有尾、包三列(有个container容器包裹：左、中、右三个区域)--><header>我是圣杯布局头部</header><!--包裹middle、left、right的container容器--><div class="container clearFloat"><div class="middle">我是中间区域<br></div><div class="left">我是左侧</div><div class="right">我是右侧</div></div><footer>我是圣杯布底部部</footer>2.圣杯布局思路：
1. container包裹的：header、footer加：width:100%，height:30px。
2. container包裹的：中间区域（middle）宽度设置100%；middle，left均给200px；middle，left，right均左浮动，此时middle占了100%，宽度不够left，right被挤到下一行。
3. left设置margin-left:-100%，right设置margin-left:-200px；此时left区域上去了，并靠左，right上去了，靠右；但是left遮挡住了middle的左侧部分。
4. 设置container的padding:200px，让左右让出200px区域给left和right，但left、right也跟着过去了。
5. 给left和right加relative相对定位，然后left区域：left:-200px；然后right区域：right:200px；为了效果给middle、left、right都价格高度，中间正常显示，圣杯布局完成。
备注：为了观看清晰，body加了一个浅黄色背景，header和footer加了文字居中等样式。
处理等高问题：当左侧内容很多时，header、right区域会不与left等高，如下图：
利用magrin为负处理这个问题，给left、right、middle都加上padding-bottom:10000px，同时设置margin-bottom:10000px，将父容器container边缘推上去，同时父容器container设置overflow:hidden，达到如下效果：
3.圣杯布局最终CSS样式：
<style>*{margin: 0;padding: 0;}/*为便于观察body加了淡黄色背景*/body{background-color: #FFFFE0;}/*清除浮动*/.clearFloat:after{content: "";display: block;clear: both;visibility: hidden;height: 0;}.clearFloat{zoom: 1;}header{width: 100%;height: 30px;background-color: gray;text-align: center;}footer{width: 100%;height: 30px;background-color: gray;text-align: center;}.container{padding: 0 200px;/*给左右让空间*/overflow: hidden;/*配合超大padding和超大负margin实现等高布局*/}.middle{float: left;width: 100%;background-color: orange;text-align: center;padding-bottom: 10000px;/*为了实现等高*/margin-bottom: -10000px;/*为了实现等高*/}.left{float: left;width: 200px;background-color: greenyellow;text-align: center;margin-left: -100%;/*让left上去，靠左*/position: relative;/*给left推到左边*/left: -200px;/*给left推到左边*/padding-bottom: 10000px;/*为了实现等高*/margin-bottom: -10000px;/*为了实现等高*/}.right{float: left;width: 200px;background-color: lightpink;text-align: center;margin-left: -200px;left: 200px;/*给right推到右边*/position: relative;/*给right推到右边*/padding-bottom: 10000px;/*实现等高*/margin-bottom: -10000px;/*实现等高*/}
</style>二、双飞翼布局
1.双飞翼布局DOM结构
<header>我是双飞翼头部区域</header><div id="middle"><div id="inside">我是中间区域</div></div><div id="left">我是左侧</div><div id="right">我是右侧</div><footer>我是双飞翼底部区域</footer>2.双飞翼布局思路（前三步与圣杯相同）
1. header、footer宽度100%，同圣杯布局第一步；
2.left、right、middle三个区域全左浮动，同圣杯布局第二步；
3.left、right设置margin-left，让左靠左，右靠右，此时left、right遮挡了middle区域同圣杯第三步；
4.将被middle包裹的inside设置margin:0 200px; 给左右留出空间；
5.给左侧设置：margin-left: -100%; 给右侧设置：margin-left: -200px; 让左靠左，右靠右，完成双飞翼布局。
3.双飞翼布局最终CSS样式：
<style>*{margin: 0;padding: 0;}body{background-color: #FFFFE0;/*便于观看加的样式*/}header{height:30px;background: gray;text-align: center;}footer{clear: both;height:30px;background: gray;text-align: center;}#middle{float:left;width:100%;text-align: center;}#left{float:left;width:200px;text-align: center;margin-left: -100%;background:yellowgreen;}#right{float:left;width:200px;text-align: center;margin-left: -200px;background:lightpink;}/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/#inside{background-color: orange;text-align: center;margin:0 200px;}
</style>三、圣杯和双飞翼布局的区别
其实简单来说二者的区别就在：解决中间区域被遮挡问题的方式上。
1.圣杯解决被遮盖的方式：
在最开始用容器包裹了：左、中、右，随后通过设置包裹容器container的padding，让中间区域左右留白，也就是说圣杯布局的左、中、右是完全独立的，他们之间是有缝隙的（如果缝隙可见的话），例如我们接下来：
1. 给container加一个蓝色背景色，并且设置高一些的高度。
2. 去左、中、右的等高布局，给middle再加一行文字。
则从在空间立体视图上，左、中、右位置如下图：
可以看出，左、中、右是独立的三个区域，都处于一个层级，都由container这个容器（蓝色）承接，左右两侧是靠container的padding留出来的。
2.双飞翼解决被遮盖的方式：
双飞翼采用只处理中间解决遮盖问题，先给中间的包裹器middle加margin，让出左右空间，然后给left、right设置margin为负，把自己推上去，空间侧视图如下：
可以看出，左、中、右是独立的三个区域，中间区域属于最上面的层级（inner那个div），左右两侧和middle容器一个层级
圣杯布局、双飞翼布局的理解及对比相关推荐
- [css] 圣杯布局 双飞翼布局
文章目录 三栏式布局 圣杯布局 方法1:使用float布局框架 , 用margin为负值 , position: relative定位 分析: 代码: 缺点 方法2:calc 方法3: flex布局 ...
- 圣杯布局双飞翼布局认识
作为纯野生的前端小白,当第一次听到圣杯布局的时候是懵逼的,这是什么布局,简直从来没听过.于是乎搜索引擎搜索一番,狂点开十来个页面,看demo,看评论,动手实践demo,最后..."圣杯布局从 ...
- 【CSS】圣杯、双飞翼布局
[CSS]圣杯.双飞翼布局 文章目录 [CSS]圣杯.双飞翼布局 圣杯布局 基本布局样式 接下来要把主区域移动到中间 把右区域放在主区域的右边 移动左右区域,防止两边挡住中间 完整代码 双飞翼布局 基 ...
- 主流布局--双飞翼布局
主流布局–双飞翼布局 什么是双飞翼布局? 双飞翼布局最早是淘宝团队提出的,是针对圣杯局部优化的解决方案.主要是优化了圣杯布局中开启定位的问题. HTML <div class="par ...
- 前端布局：圣杯布局/双飞翼布局(两者小小的区别)
今天逛知乎日常搜索了几个关于前端面试的问题,本以为学了react之类的框架就可以放弃css,现在想想自己真是太天真了.老前辈们说过:"Css你可以不把每一个属性全都记住,但是你一定要在你需要 ...
- 【布局】圣杯布局双飞翼布局
背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码 "如果三排布局能将中间的模 ...
- HTML(十二)三种常见布局：三栏式布局 双飞翼布局 圣杯布局
一.三栏式布局 顾名思义,即是将主页分成三部分(左,中,右),给左边和右边的块定宽,中间的块占据余下部分.以下是几种常用的实现方法 1.巧用浮动 优点:兼容性好,实现简单 缺点:必须先写浮动元素,再写 ...
- CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解 写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
- CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）
两栏布局(左列定宽, 右列自适应) DOM结构 <div class="box"><div class="box-left"></ ...
- 【聊一聊】css中的经典布局——双飞翼布局
上一文,[聊一聊]css中的经典布局--圣杯布局中,我介绍过,圣杯布局不添加额外的标签(主要是只中间块).在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的, ...
最新文章
- c++ clang_complete
- 使用Maven 实现打包生成一个可执行jar包：附详细配置解释说明
- 深度学习（三十九）——深度强化学习（2）概述, Deep Q-learning Network（1）
- 【hihocoder - offer编程练习赛60 B】最大顺子（双指针，思维）
- Asp.net中页面传值几种方式
- 第 20 章 权限管理的基本概念
- 输入法快捷键_[秒杀必备]搜狗输入法自定义短语快捷键设置
- java 解码 encodeuri_encodeURIComponent编码后java后台的解码
- java hibernate 插入数据_hibernate 批量插入数据
- 【Scratch案例实操】scratch我们爱编程 scratch编程案例教学 scratch创意编程 少儿编程教案
- CCF CSP 201903-1 小中大(C语言100分)[序列处理]
- Neural Turing Machines-NTM系列
- GDS文件如何打开？
- 机器学习案例：预测自行车流量——基于Scikit-Learn
- 第三方百度地图-----展示所在位置显示小圆点
- java雀圣麻将游戏_《梦幻麻将馆9雀圣争霸》全攻略
- 使用rapidxml 生成xml文件
- Matlab状态模式(State)
- 什么是贝叶斯网络？原理入门
- hive任务卡在个别reduce的问题分析