参考:

圣杯布局的来历是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_圣杯布局和双飞翼布局的更多相关文章

  1. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  2. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  3. 中间自适应,左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  4. css布局笔记(三)圣杯布局,双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...

  5. CSS布局之圣杯布局和双飞翼布局

    其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...

  6. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

  7. CSS圣杯布局、双飞翼布局详解

    三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...

  8. CSS经典布局——圣杯布局与双飞翼布局

    一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...

  9. css两栏布局、圣杯布局、双飞翼布局

    最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...

随机推荐

  1. React 记录(6)

    React文档:https://www.reactjscn.com/docs/react-component.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reac ...

  2. OpenStack VS Kubernetes,谁是你心中的王者?

      当下云计算的领域里热度最高的两个项目,无疑是OpenStack和Kubernetes.如果云计算是一个风起云涌的江湖,毫不夸张的说OpenStack和Kubernetes就是江湖里的泰山北斗.Op ...

  3. 02 Redis关闭服务报错---(error) ERR Errors trying to SHUTDOWN. Check logs.

    127.0.0.1:6379> shutdown (error) ERR Errors trying to SHUTDOWN. Check logs. 1.在redis.conf中修改日志文件的 ...

  4. UE4材质特别属生记录

    tangent space normal 切线空间法线 材质默认使用的切线空间法线,可切换为对象空间法线(彩色贴图) Separate Translucency 单独半透明 允许半透明被渲染到一个单独 ...

  5. Django-1-URL路由系统

    一.分发地址 在APP中创建urls.py文件,将属于该APP的url地址都写入到这个文件中,当程序收到用户发送的请求时,先在根目录的urls.py文件中查找该地址属于哪个APP,将这个请求分发到该A ...

  6. Xpath初了解

    如下一段html: <html> <body> <form id="loginForm"> <input name="usern ...

  7. openssl-1.1.0g reference

    include/openssl aes.h: struct aes_key_st { aes.h: unsigned long rd_key[4 * (AES_MAXNR + 1)]; aes.h: ...

  8. 【原创】Java基础之常用JVM工具

    查看当前所有java进程 # jps 查看某个进程的堆内存占用情况 # jmap -heap $pid 查看某个进程的堆内存中对象分布情况 # jmap -histo $pid 将某个进程的堆内存导出 ...

  9. [Linux]ln -al输出内容解析

    第一项的第一位是文件类型:-: 表示普通文件d: 目录b: 块特殊文件c: 字符特殊文件l:  符号链接文件p: 命名管道文件FIFOs: 套接字文件 第二项是该文件的inode的链接计数,即stat ...

  10. 列表生成式,迭代器&生成器

    python3中range(10)就 是迭代器 列表生成式 #列表生成式 a=[0,1,2,3,4,5] b=[] for index,i in enumerate(a): a[index]+1 pr ...