DIV+CSS布局之圣杯布局与双飞翼布局

圣杯布局 & 双飞翼布局
简单介绍一下什么是双飞翼布局和圣杯布局：
它们俩都是为了解决三栏布局问题，左右栏宽度固定，中间栏自适应（随着父盒子大小改变而改变）。中间栏要放在中间以优先渲染。它们的布局思想略微有且差别。
废话不多说，代码奉上

hTML

<body>
<div class="main"><div class="center">center</div><div class="left">left</div><div class="right">right</div></div>
</body>

CSS

.main{margin:0 auto;height: 300px;max-width: 1000px;min-width: 600px;width: 900px;           padding-left: 150px;padding-right: 250px;}.main>div{float: left;}.left{height: 100%;width: 150px;background: #ccc;position: relative;left: -150px;*/}.right{background: blue;height: 100%;width: 250px;position: relative;right: -250px;*/}.center{width: 100%;height: 100%;background: red;}

为了让他们仨在“同一水平”，三个div都设置为 float：left
结果如图：

Emmm 结果似乎不是想象中的样子，为了真的能在同一水平，我们让左右盒子外边距分别移动margin-left: -100%,margin- right:-200px;

似乎可以了，but，左右盒子把中间盒子覆盖了。于是我们可以在父盒子上设置padding-left：100px和padding-right：200px 强制把中间盒子被覆盖的部分挤到中间去。再对左右盒子用相对定位，再让左盒子相对原来的位置左移动它自身宽度，右盒子相对于原来的位置向右移动它自身宽度。

.left{height: 100%;width: 150px;background: #ccc;margin-left: -100%;position: relative;left: -150px;}.right{background: blue;height: 100%;width: 250px;margin-left: -250px;position: relative;right: -250px;}

大功告成：这样中间的盒子就可以实现自适应啦

双飞翼布局
双飞翼布局与圣杯布局原理差不多，只有略微差别。
代码奉上

HTML：
<div class="wrap"><div class="center"><div class="center-son">centerxxxxx</div></div><div class="left">lefttt</div><div class="right">right</div>
</div>

HTML结构中，.center中间多了一个子盒子—— .center-son。这是两个布局的差别所在。Go on~

CSS：
.wrap{height: 300px;width: 700px;max-width: 900px;min-width: 500px;margin:0 auto;      }.wrap>div{float: left;}.center{height: 100%;width: 100%;background: yellow;/*border: 10px solid #000;*/    }
.center>.center-son{margin:0 200px 0 100px;width: 100%;}.left{height: 100%;width: 100px;background: red;margin-left: -100%;}.right{width: 200px;height: 100%;background: blue;margin-left: -200px;}

CSS和之前差不多，多了一个.center-son样式，收工，不再需要给左右盒子设置样式

总结：设置div 的 box-sizing:border-box 再给中间盒子+10px边框
清晰看到他们的区别所在
圣杯!

双飞翼

从以上两个图我们可以明显知道
圣杯的思想是：
中间盒子被覆盖的部分，通过给父盒子设置padding-left和padding-right，把中间盒子往中间挤，让它不被左右盒子覆盖。
双飞翼思想：
给中间盒子加一个子盒子，中间盒子虽然还是被覆盖着，但可以通过它的子盒子的margin-left和margin-right，让它的子盒子不被覆盖。然后在子盒子输入内容。

**双飞翼比较简单**

DIV+CSS布局之圣杯布局与双飞翼布局相关推荐

HTML变列自适应布局三行,div自适应居中_典型的DIV CSS三行二列居中高度自适应布局...
摘要腾兴网为您分享:典型的DIV CSS三行二列居中高度自适应布局,弈玩游戏,携程,悟空单车,我和你等软件知识,以及驾考精灵,指尖遥控,广告拦截,浙江学习网,360主题桌面,平板电脑qq,咖啡厅室内 ...
css背景上能添加文字,如何利用div+css来给背景图片上文字布局
这段时间设计了一个专题页面,上传到网站上去,打开这个网页一看,问题来了,这网页只是一个图片,没有文字,在后台添加的时候才知道只能在图片的下面显示文字. 我想到了可以将图片设为背景,然后在上面添加问题, ...
DIV+CSS搭建（淘宝首页）布局图
制作网页时,构建页面布局图很重要.布局前的结构划分避免造成混乱. 下面的代码只有DIV+CSS的网页结构布局.没有将最终的淘宝静态页面的代码放上去,只有布局图和最终页面的比较图. 搭建的布局图与最终效 ...
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
[css] 圣杯布局双飞翼布局
文章目录三栏式布局圣杯布局方法1:使用float布局框架 , 用margin为负值 , position: relative定位分析: 代码: 缺点方法2:calc 方法3: flex布局 ...
双飞翼HTML圣杯布局,Web前端：CSS中的圣杯布局与双飞翼布局
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...
前端布局：圣杯布局/双飞翼布局(两者小小的区别)
今天逛知乎日常搜索了几个关于前端面试的问题,本以为学了react之类的框架就可以放弃css,现在想想自己真是太天真了.老前辈们说过:"Css你可以不把每一个属性全都记住,但是你一定要在你需要 ...
双飞翼布局与圣杯布局再理解
CSS系列之圣杯布局与双飞翼布局文章目录 CSS系列之圣杯布局与双飞翼布局前言一.为什么提出圣杯布局? 二.圣杯布局 1.html代码 2.样式设置三.双飞翼布局 html代码 css样式前 ...
【经典布局】圣杯布局和双飞翼布局
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.两种布局的对比二.使用步骤 1. 圣杯布局 2. 双飞翼布局总结前言圣杯布局和双飞翼布局解决的问题是一样的 ...
基本布局，圣杯布局，双飞翼布局
1.圣杯布局圣杯布局就是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证可以优先渲染. 2.双飞翼布局双飞翼布局和圣杯布局基本是一致的,都是两边固定,中间自适应的三栏布局,主要 ...

DIV+CSS布局之圣杯布局与双飞翼布局

DIV+CSS布局之圣杯布局与双飞翼布局相关推荐

最新文章

热门文章