<!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. Codeforces703D-Mishka and Interesting sum-离线树状数组

    (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 题意:传送门  原题目描述在最下面.  询问一个区间内出现次数为偶数次的数字的异或和. 思路:  先求出区间异或前缀和,其实就是出现次 ...

  2. i++ 和 ++i 的区别

    先说运算规则吧. i++ 是先赋值后自增:++i 是先自增后赋值. 以下是代码示例: int a=0; int b=0; int i=0; a=i++; System.out.println(&quo ...

  3. k8s 对接glusterfs存储

    service 与 endpoint 是通过namespace相同,name相同,相互关联的 创建endpoint [root@k8s-master glusterfs]# cat glusterfs ...

  4. 网络安全系列 之 TLS/SSL基本原理

    1. TLS/SSL基本工作方式: TLS/SSL的功能实现主要依赖于三类基本算法(参见"网络安全系列 之 密码算法"): 非对称加密算法:实现身份认证和密钥协商 对称加密算法: ...

  5. JS与Jquery的事件委托机制

    传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...

  6. WinCE下的第二个窗口程序

    MFC写的,有些简陋,但是还是感觉不错,一个小小的计算器,各个方面的功能都完成了 但是唯独那个CEdit里面的文字不能右对齐.那个扩展风格用不了

  7. ES6 学习 -- 箭头函数（=>）

    (1).只有一个参数且只有一句表达式语句的,函数表达式的花括号可以不写let test = a => a; // 只有一个参数a,这里的表达式相当于 "return a" ( ...

  8. double to string 损失精度的问题

    https://blog.csdn.net/magieclarence/article/details/6792511?utm_source=blogxgwz0 类似于这样 double 的精度是一个 ...

  9. Unix、Linux、Windows操作系统的区别

    1.操作区别 原文地址: https://blog.csdn.net/qq_41026740/article/details/96018808 linux区分大小写,windows在dos界面命令下不 ...

  10. Taro框架---左滑动删除

    index.js import Taro, { Component } from '@tarojs/taro' import { View,ScrollView } from '@tarojs/com ...