CSS_圣杯布局和双飞翼布局
参考：
圣杯布局的来历是2006年发在a list part上的这篇文章：
http://alistapart.com/article/holygrail
双飞翼布局介绍-始于淘宝UED：
http://www.imooc.com/wenda/detail/254035
博客：http://www.cnblogs.com/imwtr/p/4441741.html
理解：
圣杯布局和双飞翼布局均可以实现一个三栏布局：中间栏先加载，然后是左栏，右栏；左右两栏宽度固定，中间栏宽度自适应（会根据浏览器的窗口的大小而变化。）
圣杯布局实现原理：
（1）定义一个div，class为container容器，包含以下三个div，分别表示main（中间栏），left（左栏），right（右栏），注意：div的顺序分别是main，left，right，因为根据HTML文档的加载原理，写在前面的先加载到，所以要把main写在最前面。
（2）让main ，left， right都左浮动。
（2）定义高度。
（3）定义宽度：main为100%，left和right可以为一个固定的宽度，eg：300px；
（4）由于main的宽度有100%，所以会left和right会被挤到下面。
此时需要定义左栏left浮动到最左边：margin-left : -100%；同理定义右栏浮动到最右边：margin-left：-300px；
（5）通过以上四步，实现了三栏，中间自适应布局，但是由于main的宽度是100%，此时main中的内容是会被left和right遮挡住的。
因此需要为container容器定义padding-left和padding-right，宽度分别为left和right的宽度，但是这样会导致left和right也会更着过来，不再是在浏览器窗口的最左端和最右端，如下图所示：（红色画圈部分为设置的padding，这里还是会遮挡住main的内容。）
（6）对left和right进行相对定位：分别是：left：-300px；right：-300px；使其回到浏览器的最左端和最右端。自此，完成，main的内容也不会被遮挡了。
1.圣杯布局（完整代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
.clearfloat:after{
display: block;
clear:both;
content: "";
visibility: hidden;
height: 0;
}
.container{
overflow: hidden;
padding: 0 300px;
}
.col{
position: relative;
height: 700px;
float: left;
color: #fff;
}
.left,.right{
width: 300px;
background-color: #3b3b3b;
}
.main{
width: 100%;
background-color: #b3b3b3;
}
.left{
margin-left: -100%;
left: -300px;
}
.right{
margin-left:-300px;
right: -300px;
} </style>
</head>
<body>
<div class="container .clearfloat">
<div class="main col">main</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
</body>
</html>
双飞翼布局实现原理：
双飞翼布局的前四步和圣杯布局是相同的，只是在处理main内容被遮挡的方法不同：双飞翼布局采用的方法是为main加一个div的遮罩，为这个遮罩设置margin-left和margin-right，左栏和和右栏宽度都为300px的div，遮罩可以这样设置：margin：0 300px;
2.双飞翼布局（完整代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
.clearfloat:after{
display: block;
clear:both;
content: "";
visibility: hidden;
height: 0;
}
.col{
height: 700px;
float: left;
color: #fff;
}
.left,.right{
width: 300px;
background-color: #3b3b3b;
}
.main{
width: 100%;
background-color: #b3b3b3;
}
.main-wrap{
margin: 0 300px;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -300px;
}
</style>
</head>
<body>
<div class="container .clearfloat">
<div class="main col">
<div class="main-wrap">
main
</div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
</body>
</html>
CSS_圣杯布局和双飞翼布局的更多相关文章
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...
- css布局笔记（三）圣杯布局，双飞翼布局
圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...
- CSS布局之圣杯布局和双飞翼布局
其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- CSS圣杯布局、双飞翼布局详解
三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...
- CSS经典布局——圣杯布局与双飞翼布局
一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...
- css两栏布局、圣杯布局、双飞翼布局
最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...
随机推荐
- MySQL实战45讲学习笔记：事务隔离级别（第三讲）
一.隔离性与隔离级别 1.事务的特性 原子性 一致性 隔离性 持久性 2.不同事务隔离级别的区别 读未提交:别人改数据的事务尚未提交,我在我的事务中也能读到.读已提交:别人改数据的事务已经提交,我在我 ...
- Entity Framework入门教程（15)---DbContext追踪实体状态改变
这一节介绍DbContext追踪实体的变化.EF支持DbContext在其生命周期中自动追踪加载的实体.我们可以通过DbChangeTracker类获取DbContext追踪的所有实体的变化. 注意每 ...
- LFYZ-OJ ID: 1009 阶乘和
思路 循环n次,每次计算i的阶乘i!,并加入sum中. n的范围从1~100,这里一定要使用高精度运算,涉及到"高精度乘低精度","高精度加高精度". 避免每次 ...
- pymysql的使用及sql注入
pymysql简介 pymysql是python操纵mysql的一个模块,本质上是一个socket客户端 pymysql使用 准备数据 #创建数据库db2,如果已存在,请忽略 CREATE DATAB ...
- jpa @onetomany 级联查询时会有重复数据,去重问题
自己是直接查出来然后利用set去重(自己感觉不是太好,不过能达到目的) List<CampaignDashboardDimensionDo> list = query.getResultL ...
- CSS之使用display:inline-block来布局
css之display:inline-block布局 1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素): 使元素变成行内 ...
- CCF CSP 认证
参加第八次CCF CSP认证记录 代码还不知道对不对,过两天出成绩. 成绩出来了,310分. 100+100+100+10+0: 考试13:27开始,17:30结束,提交第4题后不再答题,只是检查前四 ...
- Python中应该使用%还是format来格式化字符串？
转载自http://www.cnblogs.com/liwenzhou/p/8570701.html %的特点是,前面有几个%,后面的括号里就得有几个参数,如果只有一个%,括号可以省略 基本格式 'a ...
- NB-IoT省电模式：PSM、DRX、eDRX【转】
转自:https://blog.csdn.net/zoomdy/article/details/80447372 NB-IoT支持三种省电模式:PSM (Power Saving Mode,省电模式) ...
- CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法
因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...