CSS布局——圣杯布局、双飞翼布局

圣杯布局和双飞翼布局解决的都是两边顶宽、中间自适应的三栏布局问题，要实现中间部分优先渲染。

先上两个demo。

圣杯布局：

<!DOCTYPE html>
<html>
<head><title>圣杯布局</title><meta charset="utf-8"><style>.header {width: 100%;height: 30px;background: red;}.content {overflow: hidden;padding: 0 100px;}.footer {width: 100%;height: 30px;background: red;}.middle {position:relative;           width: 100%;float: left;height: 80px;background: green;}.left {position:relative;width: 100px;float: left;left:-100px;height: 80px;margin-left: -100%;background: yellow;}.right {position:relative;            width: 100px;float: left;right:-100px;height: 80px;margin-left: -100px;background: pink}</style>
</head>
<body><div class="header"></div><div class="content"><div class="middle"></div><div class="left"></div><div class="right"></div></div><div class="footer"></div></body>
</html>

双飞翼布局：

<!DOCTYPE html>
<html>
<head><title>双飞翼布局</title><meta charset="utf-8"><style>.header {width: 100%;height: 30px;background: red;}.content {overflow: hidden;}.footer {width: 100%;height: 30px;background: red;}.middle {         width: 100%;float: left;}.inner-middle{height: 80px; margin: 0 100px; background: green;            }.left {width: 100px;float: left;height: 80px;margin-left: -100%;background: yellow;}.right {           width: 100px;float: left;height: 80px;margin-left: -100px;background: pink}</style>
</head>
<body><div class="header"></div><div class="content"><div class="middle"><div class="inner-middle"></div></div><div class="left"></div><div class="right"></div></div><div class="footer"></div></body>
</html>

两者的异同：

首先如开题所述，两种布局解决的问题是一样的，只是实现方式有些微小的差别；

两者都采用了向左浮动的方式，还用实现布局的重点都是负边距的使用；

圣杯布局使用固定的左右padding值的限制左右栏的大小，实现中间部分的自适应，两侧部分使用了负边距和relative控制；双飞翼布局则在中间栏使用了嵌套的div,在内层使用了margin来控制边距，两侧则只使用了负边距来保持位置；两者相比双飞翼布局d增加了一个div,但少用了relative样式。

CSS布局——圣杯布局、双飞翼布局相关推荐

【CSS】圣杯、双飞翼布局
[CSS]圣杯.双飞翼布局文章目录 [CSS]圣杯.双飞翼布局圣杯布局基本布局样式接下来要把主区域移动到中间把右区域放在主区域的右边移动左右区域,防止两边挡住中间完整代码双飞翼布局基 ...
浅谈面试中常考的两种经典布局——圣杯与双飞翼
圣杯和双飞翼布局介绍最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解. 博客链接:http://www.xluos.com/index.ph... 圣杯布局和双 ...
浅谈面试中常考的两种经典布局——圣杯与双飞翼 1
2019独角兽企业重金招聘Python工程师标准>>> 圣杯和双飞翼布局介绍最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解. 圣杯布局和双飞 ...
CSS中经典的双飞翼布局(
笔者在一些博客和论坛中经常看到经典的双飞翼布局,淘宝的首页也运用了这种兼容性很好的双飞翼布局 1.何谓双飞翼布局? 简单来说,双飞翼布局是将一个网页分为左列,中列和右列三部分,并且我们要得到的效果是: ...
双飞翼HTML圣杯布局,Web前端：CSS中的圣杯布局与双飞翼布局
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...
CSS布局（等宽、圣杯、双飞翼、底部固定）
1. 全背景等宽内容居中布局即将元素左右padding设置为父元素宽度的50%减去等宽内容的一半,不需要设置width. 要点:使用**calc()** <!DOCTYPE html> ...
双飞翼布局内容不换行_web前端入门到实战：圣杯布局和双飞翼布局
稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ ...
手把手教你理解圣杯布局和双飞翼布局
圣杯布局和双飞翼布局都是三栏布局的典型布局. 1.为了保证页面渲染快,在写结构的时候,需要把中间盒子放在左右盒子的前面,中间一栏最先加载,渲染出来(主要内容). 2.两侧内容宽度固定,中间自适应,盒子 ...
圣杯布局、双飞翼布局的理解及对比
一.圣杯布局 1.圣杯布局的DOM结构如下: 圣杯特点简单记为:有头.有尾.包三列,圣杯布局中间是有container大容器包裹着左中右区域的. <!--特点:有头.有尾.包三列(有个conta ...
css关于圣杯布局的一些问题
最近看一些圣杯和双飞翼布局,在掘金上面看到了一篇这样的博客,经典的圣杯布局,和双飞翼布局, 考点是什么其中在给left设置margin-left:-100%的时候,我不太理解问什么,left元素的位 ...

CSS布局——圣杯布局、双飞翼布局

CSS布局——圣杯布局、双飞翼布局相关推荐

最新文章

热门文章