参考：

圣杯布局的来历是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. xshell连接ubuntu系统

    1.登录虚拟机 2.关闭本机所有防火墙和杀毒软件 sudo ufw status 查看防火墙状态 sudo ufw disable 关闭防火墙 sudo ufw enable 打开防火墙 3.安装ss ...

  2. dubbo本地服务化实现（dubbo三）

    一.dubbo服务化架构包含的内容 对于传统工程而言,分层的依据是按照包来区分.由于在相同的工程中,所以服务的提供和调用可以方便的实现. 但是对于分布式架构而言,服务的提供者负责服务具体的实现和接口规 ...

  3. 报表工具-ECharts 特性介绍

    ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,S ...

  4. 第五节: EF高级属性(一) 之 本地缓存、立即加载、延迟加载(不含导航属性)

    一. 本地缓存 从这个章节开始,介绍一下EF的一些高级特性,这里介绍的首先介绍的EF的本地缓存,在前面的“EF增删改”章节中介绍过该特性(SaveChanges一次性会作用于本地缓存中所有的状态的变化 ...

  5. MySQL关于日志配置安全整改及处理方法

    [环境介绍] 系统环境:Linux + mysql 5.7.18 + 主从复制架构 [背景描述] 需求:MySQL数据库都有每年的集团安全整改,常常要求弱口令扫描,基线扫描,漏洞扫描等等.对于MySQ ...

  6. SQL注入绕过技巧总结

    1.SQL注入过程中的处理# 终端payload编码------>web服务器解码-------->CGI脚本解码------>web应用解码----->数据库解码 浏览器.代 ...

  7. java8 按对象属性值分组

    Map<String, List<User>> userMap = list.stream().collect(Collectors.groupingBy(User::getG ...

  8. 第四周结对项目总结及改进（ui/web）

    项目介绍 随着社会科技的进步和多媒体教育的日益发展,越来越来的学生正在接受着新时代下的教育模式,而且手机.电脑等科技产品的普及以及其带来的更高效更便捷的模式 使得它们成为当代学生学习中的一种很好的学习 ...

  9. 推荐安全且匿名的邮箱 ProtonMail -- PGP算法

    ==以前一直以为平时所用的邮箱是绝对安全的,没有深思它的安全性. 然而你要“犯罪”不留任何痕迹的话,呵呵. 国内应该没有类似 ProtonMail 的邮箱,-->去了解一下 ========== ...

  10. 第一章 Java程序设计概述

    1.1 Java程序设计平台 Java是一门设计优秀的语言,更是一个完整的平台.Java平台包括了一个庞大可重用的类库以及提供了安全性,跨系统,自动垃圾收集等优秀特性的执行环境. 这也使其成为自发布以 ...