参考：

圣杯布局的来历是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. CMDB服务器管理系统【s5day91】：资产采集相关问题

    资产采集唯一标识和允许临时修改主机名 class AgentClient(BaseClient): def exec(self): obj = PluginManager() server_dict ...

  2. Hive SQL 分类

    题目: 请使用Hive SQL实现下面的题目. 下面是一张表名为user_buy_log的表,有三个字段,user(用户),grp(分组编号),time(购物时间). 需要将用户按照grp分组,对ti ...

  3. Jenkins-在windows上配置自动化部署（Jenkins+Bonobo.Git.Server）

    本文配置Jenkins.git服务器采用 Bonobo.Git.Server 1. 登录后,打开Jenkins界面,新建一个任务 2. 配置信息 3. 配置git项目地址,我们先进行其他配置,等会再继 ...

  4. ArcGis安装失败提示“需要Microsoft .NET Framework 3.5 sp1或等效环境”的解决方法

    这个问题一般出现在Win8或者Win10系统上,因为系统默认没有启用该.Net Framework. 下载Microsoft .NET Framework 3.5 sp1安装后再开始安装ArcGis. ...

  5. 轴对称 Navier-Stokes 方程组的一个点态正则性准则

    对轴对称 NSE, 我们改进了 [Pan, Xinghong. A regularity condition of 3d axisymmetric Navier-Stokes equations. A ...

  6. [再寄小读者之数学篇](2014-07-27 $H^{-1}$ 中的有界集与弱收敛极限)

    设 $H^{-1}$ 是 $H^1_0$ 的对偶空间, 定义域为 $[0,1]$. 试证: (1) $\sed{h\sin (2\pi hx);\ h>0}$ 在 $H^{-1}$ 中有界; ( ...

  7. [物理学与PDEs]第4章第2节 反应流体力学方程组 2.2 反应流体力学方程组形式的化约

    1.  粘性热传导反应流体力学方程组 $$\beex \bea \cfrac{\rd \rho}{\rd t}&+\rho \Div{\bf u}=0,\\ \cfrac{\rd Z}{\rd ...

  8. Vue技术内幕 出去看看吧 实例化+挂载

    实例化时挂载DOM 从 Vue.prototype.$mount 挂载函数开始 有 template配置项时生成 render函数

  9. 【原创】Linux基础之curl

    http请求过程如下: # curl -v http://www.baidu.com % Total % Received % Xferd Average Speed Time Time Time C ...

  10. Gmagick convert SVG to PNG with transparent/opacity background

    1 前言 在Ubuntu18.04环境下,用gographics/gmagick API使用了以下代码未有效果 pw := gmagick.NewPixelWand() pw.SetOpacity(1 ...