<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--两组实现的对比:

        .俩种布局方式都是把主列放在文档流最前面，使主列优先加载。

        .两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。

        .两种布局方式的不同之处在于如何处理中间主列的位置：

                圣杯布局是利用父容器的左、右内边距+两个从列相对定位；

                双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

        -->

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            body{

                min-width: 600px;

            }

            /*头部 脚部样式*/

            #header,#footer{

                border: 1px solid;

                background: gray;

                text-align: center;

            }

            /*三列的伪等高布局*/

            #content .middle,#content .left,#content .right{

                /*padding-bottom:10000px ;

                margin-bottom: -10000px;*/

                height: 50px;

                line-height: 50px;

                float: left;

            }

            /*双飞翼布局*/

            #content{

                overflow: hidden;

            }

            #content .middle{

                width: %;

                background: deeppink;

            }

            #content .middle .m_inner{

                padding:  200px;

            }

            #content .left,#content .right{

                background: pink;

                width: 200px;

                text-align: center;

            }

            #content .left{

                margin-left: -%;

            }

            #content .right{

                margin-left: -200px;

            }

        </style>

    </head>

    <body>

        <div id="header">

            <h4>header</h4>

        </div>

        <div id="content">

            <div class="middle">

                <div class="m_inner">

                    middle

                </div>

            </div>

            <div class="left">left</div>

            <div class="right">right</div>

        </div>

        <div id="footer">

            <h4>footer</h4>

        </div>

    </body>

</html>

<!--两组实现的对比:
1.俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
2.两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
3.两种布局方式的不同之处在于如何处理中间主列的位置：
圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
-->

html--双飞翼布局的更多相关文章

  1. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

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

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

  3. css双飞翼布局

     双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...

  4. CSS之圣杯布局与双飞翼布局

    圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head>    <meta charset="utf-8"& ...

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

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

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

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

  7. HTML特殊布局--------双飞翼布局

    今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100% ...

  8. CSS（五）圣杯，双飞翼布局

    双飞翼布局 <style> *{ margin:; padding:; } .main{ width: 100%; height: 200px; background: pink; flo ...

  9. css居中方法与双飞翼布局

    居中 类型 方法 对应属性 水平 垂直 水平&垂直 1.父元素使用外边距自动 2.子元素显示行内块级元素,写入内容,父元素设置文本居中 3.给父元素开启非绝对和固定定位作为子元素开启绝对定位的 ...

  10. css布局-双飞翼布局

    <div class="header">Header</div> <div class="bd"> <div clas ...

随机推荐

  1. java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)

    :: - [localhost-startStop-] INFO - Root WebApplicationContext: initialization started -- :: - [local ...

  2. JVM内核-原理、诊断与优化学习笔记（五）：GC参数

    文章目录 堆的回顾 串行收集器 并行收集器 ParNew(par-并行的缩写,new-新生代,所以只是新生代并行) Parallel收集器 参数设置 -XX:MaxGCPauseMills -XX:G ...

  3. 2. Vim 概念扫盲

    Frm: http://www.linuxidc.com/Linux/2013-05/84031p2.htm 了解Vim的三个基本模式 当我们安装完一个编辑器后,肯定会打开它,然后在里面输入点什么东西 ...

  4. JavaScript学习总结(七)——ECMAScript6（ES6）

    一.ECMAScript概要 ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通 ...

  5. Codeforces 479【B】div3

    题目链接: http://codeforces.com/problemset/problem/977/B 题意:字符串,找固定长度为2的重复子串出现次数最多的. 题解:我暴力做的.暴力出奇迹. #in ...

  6. python接口自动化（接口基础）

    一.什么是接口? 前端负责展示和收集数据 后端负责处理数据,返回对应的结果 接口是前端与后端之间的桥梁,传递数据的通道 二.

  7. sql 特殊时间值 第一天或最后一天 无计算错误

    DECLARE @dt datetimeSET @dt=GETDATE() DECLARE @number intSET @number=3 --1．指定日期该年的第一天或最后一天--A. 年的第一天 ...

  8. wxid 转微信号

    http://yinliuquan.xyz/ http://www.huwei233.cn/contact.html 更新: 测试以上都不行,大家找淘宝吧 愿世间有情人终成眷属

  9. CIE XYZ

    了解CIE XYZ的来龙去脉,看维基之前,先读这两篇文章: https://medium.com/hipster-color-science/a-beginners-guide-to-colorime ...

  10. Altera设置Virtual Pin

    1,GUI方式 大家都知道的,assignment editor –> category –> logic options –> to –> virtual pin –> ...