zoukankan      html  css  js  c++  java
  • 圣杯布局

      圣杯布局是讨论三栏液态布局的实现,所谓的液态布局,是相对于固态布局而言的,固态布局就是宽度固定值不变的布局,液态布局,就是好比容易向容器里倒水,它会随着容器的宽度的变化自适应宽度。

      而双飞燕布局,是对圣杯布局的一种改进。

      在了解这两个布局之前,你需要先了解margin负值和positon中负值的使用。

      margin负值可参考http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812。

    最终效果:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>圣杯布局</title>
     7     <!-- style -->
     8     <style>
     9     * {
    10         margin: 0;
    11         padding: 0;
    12     }
    13     
    14     div {
    15         text-align: center;
    16     }
    17     
    18     .header,
    19     .footer {
    20         width: 100%;
    21         height: 20px;
    22         background-color: skyblue;
    23         clear: both;
    24     }
    25     
    26     .container {
    27         margin-left: 150px;
    28         margin-right: 200px;
    29     }
    30     
    31     .main {
    32         width: 100%;
    33         float: left;
    34         background-color: #f44;
    35     }
    36     
    37     .left {
    38         width: 150px;
    39         float: left;
    40         background-color: yellow;
    41         margin-left: -100%;
    42         position: relative;
    43         left: -150px;
    44     }
    45     
    46     .right {
    47         width: 200px;
    48         float: left;
    49         background-color: pink;
    50         margin-left: -200px;
    51         position: relative;
    52         left: 200px;
    53     }
    54     </style>
    55 </head>
    56 
    57 <body>
    58     <!-- 结构 -->
    59     <div class="header">header</div>
    60     <div class="container">
    61         <div class="main">main</div>
    62         <div class="left">left</div>
    63         <div class="right">right</div>
    64     </div>
    65     <div class="footer">footer</div>
    66 </body>
    67 
    68 </html>
    View Code

    步骤分解:

    1. 基本骨架和样式

    1 <div class="container">
    2     <div class="main">main</div>
    3     <div class="left">left</div>
    4     <div class="right">right</div>
    5 </div>
     1 <style>
     2     * {
     3         margin: 0;
     4         padding: 0;
     5     }
     6     
     7     .container {}
     8     
     9     .main {
    10         width: 100%;
    11         float: left;
    12         background-color: #f44;
    13     }
    14     
    15     .left {
    16         width: 150px;
    17         float: left;
    18         background-color: yellow;
    19     }
    20     
    21     .right {
    22         width: 200px;
    23         float: left;
    24         background-color: pink;
    25     }
    26     </style>

     

    此时出现如上效果,left和right被main挤下来,出现在第二行。

    2. 使用margin负值将left和right移动到main元素上。

     1 <style>
     2     * {
     3         margin: 0;
     4         padding: 0;
     5     }
     6     
     7     .container {}
     8     
     9     .main {
    10         width: 100%;
    11         float: left;
    12         background-color: #f44;
    13     }
    14     
    15     .left {
    16         width: 150px;
    17         float: left;
    18         background-color: yellow;
    19         /* 新增 */
    20         margin-left: -100%;
    21     }
    22     
    23     .right {
    24         width: 200px;
    25         float: left;
    26         background-color: pink;
    27         /* 新增*/
    28         margin-left: -200px;
    29     }
    30     </style>

    3. 经过第二步之后,由于main的宽度是100%,所以left和right都压在main上面,我们通过他们父容器的margin,挤出left和right的空间。

     1 <style>
     2     * {
     3         margin: 0;
     4         padding: 0;
     5     }
     6     
     7     .container {
     8         /* 新增 */
     9         margin-left: 150px;
    10         margin-right: 200px;
    11     }
    12     
    13     .main {
    14         width: 100%;
    15         float: left;
    16         background-color: #f44;
    17     }
    18     
    19     .left {
    20         width: 150px;
    21         float: left;
    22         background-color: yellow;
    23         margin-left: -100%;
    24     }
    25     
    26     .right {
    27         width: 200px;
    28         float: left;
    29         background-color: pink;
    30         margin-left: -200px;
    31     }
    32     </style>

    4. 最后我们将left和right相对定位,在调整left即可得到圣杯布局。

     1 <style>
     2     * {
     3         margin: 0;
     4         padding: 0;
     5     }
     6     
     7     .container {
     8         margin-left: 150px;
     9         margin-right: 200px;
    10     }
    11     
    12     .main {
    13         width: 100%;
    14         float: left;
    15         background-color: #f44;
    16     }
    17     
    18     .left {
    19         width: 150px;
    20         float: left;
    21         background-color: yellow;
    22         margin-left: -100%;
    23         /* 新增 */
    24         position: relative;
    25         left: -150px;
    26     }
    27     
    28     .right {
    29         width: 200px;
    30         float: left;
    31         background-color: pink;
    32         margin-left: -200px;
    33         /* 新增 */
    34         position: relative;
    35         left: 200px;
    36     }
    37     </style>

    圣杯布局解决的问题:

    1. 两边固定宽度,中间可以流动;

    2. 允许中间一栏出现在最上面;(传统布局从上到下进行渲染)

    2. 任何元素都可以出现在最上面;

    4. 只需要一个额外的div;

    5. 简单的css,最少的兼容补丁。

    双飞燕布局:

    双飞燕布局是在圣杯布局上进行改进的,圣杯布局中最后使用相对定位移动right和left,但是用双飞燕布局,可以对圣杯布局进行简化,只需要在将main包裹起来,设置内层元素的margin即可实现圣杯布局的功能。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>圣杯布局</title>
     7     <!-- style -->
     8     <style>
     9     * {
    10         margin: 0;
    11         padding: 0;
    12     }
    13     
    14     div {
    15         text-align: center;
    16     }
    17     
    18     .header,
    19     .footer {
    20         width: 100%;
    21         height: 20px;
    22         background-color: skyblue;
    23         clear: both;
    24     }
    25     
    26     .container {
    27         /* 注释掉 */
    28         /*
    29             margin-left: 150px;
    30             margin-right: 200px;
    31         */
    32     }
    33     
    34     .main {
    35         width: 100%;
    36         float: left;
    37     }
    38     
    39     .inner {
    40         background-color: #f44;
    41         /* 新增 */
    42         margin-left: 150px;
    43         margin-right: 200px;
    44     }
    45     
    46     .left {
    47         width: 150px;
    48         float: left;
    49         background-color: yellow;
    50         margin-left: -100%;
    51         /* 注释掉 */
    52         /*position: relative;
    53         left: -150px;*/
    54     }
    55     
    56     .right {
    57         width: 200px;
    58         float: left;
    59         background-color: pink;
    60         margin-left: -200px;
    61         /* 注释掉 */
    62         /*position: relative;
    63         left: 200px;*/
    64     }
    65     </style>
    66 </head>
    67 
    68 <body>
    69     <!-- 结构 -->
    70     <div class="header">header</div>
    71     <div class="container">
    72         <div class="main">
    73             <div class="inner">
    74                 main
    75             </div>
    76         </div>
    77         <div class="left">left</div>
    78         <div class="right">right</div>
    79     </div>
    80     <div class="footer">footer</div>
    81 </body>
    82 
    83 </html>

    双飞燕布局好处:

    1. 主要的内容先加载的优化;

    2. 兼容目前所有的主流浏览器,包括IE6在内;

    3. 实现不同的布局方式,可以通过调整相关CSS属性即可实现。

  • 相关阅读:
    linux中编写同步文件的脚本
    SSH实现免密登录
    关于ISO 15765-2的解读
    设置Tera Term
    串口通信有极限速度
    三相永磁电机电流采样
    eclipse中F3快捷键无法跳转到定义的解决方法
    电脑和航模杂志和电子开发网站汇总
    MC9S08DZ60经典单片机
    STM32的SWD调试
  • 原文地址:https://www.cnblogs.com/diligentYe/p/6407587.html
Copyright © 2011-2022 走看看