一、圣杯布局和双飞翼布局的目的

  • 实现三栏布局，中间一栏最先加载和渲染
  • 两侧内容固定，中间内容随着宽度自适应
  • 一般用于PC网

二、圣杯布局的实现

技术要点：

  1. 设置最小宽度min-width
  2. 使用float布局，注意清除浮动
  3. 使用margin负值
  4. 对三栏整体区域设置左右内边距，宽度为left和right的宽度，避免内容重叠
  5. 使用定位

 1 <!DOCTYPE html>

 2 <html lang="en">

 3

 4 <head>

 5     <meta charset="UTF-8">

 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">

 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 8     <title>圣杯布局</title>

 9 </head>

10 <style>

11     body {

12     //设置屏幕最小宽度

13         min-width: 500px;

14         text-align: center;

15     }

16

17     header,

18     footer {

19         width: 100%;

20         background-color: grey;

21     }

22

23     section {

24         /*清除浮动*/

25         overflow: hidden;

26         /*左右设置内边距*/

27         padding-left: 150px;

28         padding-right: 200px;

29     }

30

31     #center {

32         width: 100%;

33         background-color: red;

34     }

35

36     #left {

37         /* 相对自身的定位 */

38         position: relative;

39         width: 150px;

40         /*向左平移一个父元素的宽度 */

41         margin-left: -100%;

42         /* 向左平移150px */

43         right: 150px;

44         background-color: pink;

45     }

46

47     #right {

48         width: 200px;

49         /* 可以当做right右侧元素向左平移200px，将right元素挤到上面一排显示。注：这里由于浮动，中间的元素都是连接在一起的，也就是说center与right是首尾相连的 */

50         margin-right: -200px;

51         background-color: yellow;

52     }

53

54     .culomn {

55         float: left;

56     }

57 </style>

58

59 <body>

60     <header>this is header</header>

61     <section>

62         <div id="center" class="culomn">this is center</div>

63         <div id="left" class="culomn">this is left</div>

64         <div id="right" class="culomn">this is right</div>

65     </section>

66     <footer>this is footer</footer>

67 </body>

68 </html>

三、双飞翼布局的实现

技术要点：

  1. 设置最小宽度min-width
  2. 使用float布局，注意清除浮动
  3. 使用margin负值（双飞翼布局不需要使用margin-right负值）
  4. 对center设置左右外边距，避免与侧边栏内容重叠

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>双飞翼布局</title>

</head>

<style>

    body {

        min-width: 500px;

    }

    header,

    footer {

        text-align: center;

        width: 100%;

        background-color: grey;

    }

    #contain {

        width: 100%;

    }

    #center {

        /* 对center元素设置左右外边距，分别是left和right元素的宽度，避免内容重叠 */

        margin-left: 150px;

        margin-right: 200px;

        background-color: red;

    }

    #left {

        width: 150px;

        /* left元素向左平移一个父元素的宽度 */

        margin-left: -100%;

        background-color: pink;

    }

    #right {

        width: 200px;

        /* right元素向左平移自身的宽度 */

        margin-left: -200px;

        background-color: yellow;

    }

    .culomn {

        float: left;

        text-align: center;

    }

    /* 清除浮动 */

    footer {

        clear: both;

    }

</style>

<body>

    <header>this is header</header>

    <section>

        <div id="contain" class="culomn">

            <div id="center">this is center</div>

        </div>

        <div id="left" class="culomn">this is left</div>

        <div id="right" class="culomn">this is right</div>

    </section>

    <footer>this is footer</footer>

</body>

</html>

圣杯布局与双飞翼布局效果图如下：

四、圣杯布局与双飞翼布局的区别

  1. 圣杯布局使用了margin-right负值，相对来说比较难理解
  2. 圣杯布局设置的是内边距padding，避免内容重叠。而双飞翼布局是给center元素添加了一个父盒子，只需要设置center的外边距即可避免与左右侧边栏重叠

五、总结

圣杯布局和双飞翼布局的技术总结：

  1. 使用了float布局
  2. 两侧使用margin负值，以便和中间内容横向重叠
  3. 防止中间内容被两侧覆盖，一个用padding，一个用margin

CSS经典布局——圣杯布局与双飞翼布局的更多相关文章

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

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

  2. css中的圣杯布局和双飞翼布局

    圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...

  3. 双飞翼布局介绍-始于淘宝UED

    仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术 ...

  4. 双飞翼布局介绍-始于淘宝UED-2011年淘宝玉伯写的

    仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术 ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. linux .tar.xz 文件解压和压缩

    场景:centos7.0下文件格式为xxx.tar.xz,解压和压缩命令: 压缩 tar -Jcf linux-3.10.0-123.13.1.el7.tar.xz(文件名) linux-3.10.0 ...

  2. 行业资讯 | Android WebView 致安卓应用闪退，mPaaS 助你规避这波 Bug

    根据外媒 9to5 Google 报道,3 月 23 日几个小时内,大量安卓用户遇到一些安卓应用连续闪退的情况,有人发现卸载安卓系统 WebView 就可以停止闪退.目前,谷歌已经发布了应用崩溃问题的 ...

  3. 微信公众号H5-网页开发须知

    网页授权 1. 公众号配置--授权回调域名(仅域名,不带https://)2. 配置的域名为全域名,该域名下的页面可以进行OAuth2.0鉴权3. scope 授权的[静默.非静默] a.(静默--无 ...

  4. [论文阅读笔记] Unsupervised Attributed Network Embedding via Cross Fusion

    [论文阅读笔记] Unsupervised Attributed Network Embedding via Cross Fusion 本文结构 解决问题 主要贡献 算法原理 实验结果 参考文献 (1 ...

  5. Lua时间互转

    1. 时间戳转成格式化字符串 直接利用函数os.date()将时间戳转化成格式化字符串. local timestamp = 1561636137; local strDate = os.date(& ...

  6. 固态LiDAR，半固态混合LiDAR，机械LiDAR

    固态LiDAR,半固态混合LiDAR,机械LiDAR 1. APD/SPAD 2轴MEMS扫描镜+ SPAD图像传感器在混合固态LiDAR中的应用 APD的工作模式分为线性模式和盖革模式两种.当APD ...

  7. 实时实例分割的Deep Snake：CVPR2020论文点评

    实时实例分割的Deep Snake:CVPR2020论文点评 Deep Snake for Real-Time Instance Segmentation 论文链接:https://arxiv.org ...

  8. 【逆向&渗透实战】Dump内存中的Dex_我是如何脱壳某公司加固过的Apk并利用其API渗透对方数据库

    /作者:Kali_MG1937 QQ:3496925334 CNBLOG博客号:ALDYS4/ 某天午睡,朦朦胧胧梦到给学校提供建站模板的公司有个注射点 梦醒后,我凭借着零散的记忆日进了对面的数据库, ...

  9. UF_LAYOUT 布局相关

    Open C uc6460uc6462uc6463uc6464  根据视图名称旋转视图,在布局中替换视图uc6466uc6467uc6468uc6469uc6470uc6471uc6472uc6473

  10. UF_VIEW 视图操作

    Open C   uc6400uc6401uc6402uc6403uc6404uc6405uc6406uc6408uc6409uc6430uc6431uc6432uc6433  获得视图3×3矩阵uc ...