圣杯模型与双飞翼模型

作者: 月半小夜曲_ | 来源:发表于2018-11-25 22:32 被阅读12次

圣杯模型与双飞翼模型
圣杯与双飞翼模型
CSS 经典三列布局之双飞翼
css居中案例
CSS 经典三列布局之双飞翼布局
圣杯（圣杯有两种定位）和淘宝双飞翼
圣杯布局和双飞翼布局
圣杯布局和双飞翼布局
特殊布局方法
圣杯布局和双飞翼布局

1、圣杯模型

圣杯模型的目的是实现三列布局，两侧固定宽度，中间自适应

image.png

HTML部分代码如下：为了更好看，我们加上了头部和底部

<body>
    <!-- 圣杯布局目标：三列布局，两边固定宽度，中间自适应 -->
    <div class="header">我是头部内容</div>
    <div class="container">
        <div class="middle">我是中间内容</div>
        <div class="left">我是左侧内容</div>
        <div class="right">我是右侧内容</div>
    </div>  
    <div class="footer">我是底部内容</div>
</body>

1.1第一种CSS代码如下：

 <style>
        *{                              /*清除默认外边距和内边距*/
            margin: 0;
            padding: 0;
        }
        .header,.footer{               /* 底部和头部，宽度设置100%，高度为固定高度 */
            width: 100%;
            height: 50px;
            text-align:center;
            line-height: 50px; 
        }
        .header{
            background-color: orange;
        }
        .footer{
            background-color:black;
            color: #FFF;
        }
         /* 1、左中右三列是包在一个大容器container内*/
        .container{          
            height: 600px;
          /* 6、此时左右其实是遮盖了中间部分的两侧，给container设置左右padding挤出位置 */ 
            padding: 0 200px;   
        }
        .container div{                 /* 2、三列的顺序为中、左、右，且全部左浮动*/
            float: left;
            height: 600px;
            text-align: center;
        }
        .container .middle{             /* 3、设置中间部分宽度为100%，那么左和右就被挤到下一行了*/   
            background-color: red;
            width: 100%;
        }
        .container .left{   /* 4、给左设置margin-left:-100%,那么左就和中在一行，而且在最左边*/
            background-color: green;
            width: 200px;
            margin-left: -100%;
             /* 7、container设置padding后，左边被挤向左边，所以使用相对定位向右移动*/
            position:relative;   
            right: 200px;
        }
        .container .right{ /* 5、给右设置margin-left:-200px,那么左就和中在一行，而且在最右边*/
            background-color: blue;
            width: 200px;
            margin-left: -200px;
           /* 8、container设置padding后，右边被挤向右边，所以使用相对定位向左移动*/
            position:relative;
          left: 200px;
        }
    </style>

1.2第二种CSS代码如下：

<style>
        
        *{                              /*清除默认外边距和内边距*/
            margin: 0;
            padding: 0;
        }
        .header,.footer{               /* 底部和头部，宽度设置100%，高度为固定高度 */
            width: 100%;
            height: 50px;
            text-align:center;
            line-height: 50px; 
        }
        .header{
            background-color: orange;
        }
        .footer{
            background-color:black;
            color: #FFF;
        }
        .container{                     /* 1、左中右三列是包在一个大容器container内,container设置宽度为100% */
            width: 100%;
            height: 600px;   
        }
        .container div{                 /* 2、三列的顺序为中、左、右，且全部左浮动*/
            float: left;
            height: 600px;
            text-align: center;
        }
        .container .middle{             /* 3、设置中间部分宽度为100%，那么左和右就被挤到下一行了*/   
            background-color: red;
            width: 100%;
           /*  6、此时，虽然达到了视觉效果，但是其实左右遮盖了中的两边，设置padding,但是  
          左右也被挤走了 */   
           padding: 0 200px; 
          /* 7、此时.middle的宽度其实也是100%，给.middle设置padding为左右宽度,盒模型为
          弹性盒模型 */
          /* 8、也可以给container设置padding,然后左右通过相对定位实现目的 */         
          box-sizing: border-box;     
           
        }
        .container .left{   /* 4、给左设置margin-left:-100%,那么左就和中在一行，而且在最左边*/
            background-color: green;
            width: 200px;
            margin-left: -100%;
        }
        .container .right{               /* 5、给右设置margin-left:-200px,那么左就和中在一行，而且在最右边*/
            background-color: blue;
            width: 200px;
            margin-left: -200px;
        }
    </style>

1.3第三种CSS代码如下：

 <style>
        
            *{                              /*清除默认外边距和内边距*/
                margin: 0;
                padding: 0;
            }
            .header,.footer{               /* 底部和头部，宽度设置100%，高度为固定高度 */
                width: 100%;
                height: 50px;
                text-align:center;
                line-height: 50px; 
            }
            .header{
                background-color: orange;
            }
            .footer{
                background-color:black;
                color: #FFF;
            }
            .container{   /* 1、左中右三列是包在一个大容器container内,container设置宽度为100%,并设置flex布局，左中右就不需要浮动了,且按左中右排列 */
                width: 100%;
                height: 600px;   
                display: flex;
            }
            .container div{                       
                height: 600px;
                text-align: center;
            }
            .container .left{   /* 2、左侧设置固定宽度*/
                background-color: green;
                width: 200px;
            }
            .container .right{  /* 3、右侧设置固定宽度*/
                background-color: blue;
                width: 200px; 
            }
            .container .middle{  /* 4、中间部分设置flex:1,即占满剩余空间*/   
                background-color: red;
                flex:1; 
            }
        </style>

需要注意的是，flex布局的话，三列排序为左中右

<body>
    <!-- 圣杯布局目标：三列布局，两边固定宽度，中间自适应 -->
    <div class="header">我是头部内容</div>
    <div class="container">
        <div class="left">我是左侧内容</div>
        <div class="middle">我是中间内容</div>
        <div class="right">我是右侧内容</div>
    </div>  
    <div class="footer">我是底部内容</div>
</body>

2、双飞翼模型

双飞翼模型实现的目的和圣杯模型一样，区别在于：
@圣杯模型是将左中右三列包在一个大容器内，通过padding挤出左右位置，然后通过负的margin移动左右部分
@双飞翼模型是左中右各自独立为一个容器，不过需要给中间部分外再套一个容器，然后给中间内容设置左右margin挤出位置，再通过负的margin移动左右部分，而且与圣杯相比，使用了margin就没有遮盖问题

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼模型</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header,.footer{
            height: 50px;
            width: 100%;
            text-align: center;
            line-height: 50px;
        }
        .header{
            background-color: red;
        }
        .footer{
            clear:both;
            background-color:black;
            color: #fff;
        }
        .container,.left,.right{
            float: left;
            height: 600px;
            text-align:center;
        }
        .container{
            width: 100%;
           
        }
        .left,.right{
            width: 200px;
        }
        .container{
            background-color:orange;
        }
        /* 2、通过给左右设置负的margin移动至目标位置 */
        .left{
            background-color:blue;
            margin-left: -100%;
        }
        .right{
            background-color: green;
            margin-left: -200px;
        }
        /* 1、给中间部分设置margin挤出左右位置 */
        .container .middle{  
            margin: 0 200px;
        }

    </style>
</head>
<body>
    <div class="header">我是头部内容</div>
    <div class='container'>
        <div class="middle">我是中间内容</div>
    </div>
    <div class="left">我是左侧内容</div>
    <div class="right">我是右侧内容</div>
    <div class="footer">我是底部内容</div>
</body>
</html>

3、其他方法

通过css3的新增的calc(),可以动态设置中间部分的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼模型</title>
    <style>
      *{
          margin: 0;
          padding: 0;
      }
      .header,.footer{
          width: 100%;
          height: 50px;
          background-color: red;
          line-height: 50px;
          text-align: center;
      }
      .footer{
          clear:both;
          background-color: black;
          color: #fff;
      }
      .middle,.left,.right{
          height: 600px;
          float: left;
          text-align: center;
      }
      .left{
          background-color:blue;
          width: 200px;
      }
      .right{
          background-color:green;
          width: 200px;
      }
      .middle{
          background-color:orange;
          /*使用CSS3新增的calc（）动态设置中间部分的宽度*/
          width: calc(100% - 400px);
      }
    </style>
</head>
<body>
    <div class="header">我是头部内容</div>
    <div class="left">我是左侧内容</div>
    <div class="middle">我是中间内容</div>
    <div class="right">我是右侧内容</div>
    <div class="footer">我是底部内容</div>
</body>
</html>