HTML(十二)三种常见布局：三栏式布局 双飞翼布局 圣杯布局

一.三栏式布局

顾名思义，即是将主页分成三部分（左，中，右），给左边和右边的块定宽，中间的块占据余下部分。以下是几种常用的实现方法

1.巧用浮动
优点；兼容性好，实现简单
缺点：必须先写浮动元素，再写中间的这个元素，否则右边块会掉到下一行
           左右浮动脱离文档流，可能会导致父元素高度崩塌，需要及时清除浮动

 <div class="left"></div>
 <div class="right"></div>
 <div class="center"></div>
<style>
    .left{
       width:100px;
       height:100px;
       background-color:rgb(88, 139, 122);
       float: left;
    }
    .right{
        width:100px;
        height:100px;
        background-color:rgb(25, 173, 124);
        float:right;

    }
    .center{
        margin:0 100px;/*这个加不加效果是一样的*/
        height:100px;
        background-color:rgb(15, 53, 40);
    }
    </style>

2.巧用定位，为左右的块加上定位，中间的块用margin挤到中间
特点：脱离文档流，
与html顺序无关

 <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div> 
<style>
    *{
        margin:0;
        padding:0;
    }
   .left{
       width:100px;
       height:100px;
       background-color:rgb(88, 139, 122);
       position: absolute;
       left:0;
       top:0;
    }
   .right{
        width:100px;
        height:100px;
        background-color:rgb(25, 173, 124);
        position:absolute;
        right:0;
        top:0;
    }
    .center{
        height:100px;
        background-color:rgb(15, 53, 40);
        margin:0 100;
    }  

3.flex布局
缺点：不能兼容IE8以下的浏览器

 <div class="it">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>  
    </div>
    <style>
            *{
                margin:0;
                padding:0;
            }
            .it{
                display:flex;
            }
           .left{
               width:100px;
               height:100px;
               background-color:rgb(88, 139, 122);
              
            }
           .right{
                width:100px;
                height:100px;
                background-color:rgb(25, 173, 124);
            }
            .center{
                height:100px;
                background-color:rgb(15, 53, 40);
                flex:1;
            } 

4.table法（不做仔细学习）
5.Grid法（不做仔细学习）
二、圣杯布局，圣杯也是三栏式布局的一种
特点：将左中右元素绝对定位，左浮动，中间元素：100%
父元素利用padding给左右元素留出距离
左元素margin-left：-100%；(挤到同一行)left：-100px；(挤出父元素)

  *{
     margin:0;
     padding:0;
    }
  .it{
     padding:0 100px 0 100px;
     overflow: hidden;
    }
  .left{
      width:100px;
      height:100px;
      background-color:rgb(88, 139, 122);
      float: left;
      position: relative;
      margin-left:-100%;
      left:-100px;
    }
   .right{
      width:100px;
      height:100px;
      background-color:rgb(25, 173, 124);
      float: left;
      position: relative;
      margin-left:-100px;
      right:-100px; 
     }
    .center{
      float: left;
      position: relative;
      height:100px;
      background-color:rgb(15, 53, 40);
      width:100%;
                        }

三、双飞翼布局
特点：利用将父元素的内容放到合适的位置
三个元素全部左浮动，中间元素加上一个块元素写内容，利用margin固定到合适的位置，
左右元素照样加上margin-left：-100%；

<div class="it">
<div class="center"><div class="in"></div></div>
<div class="left"></div>
<div class="right"></div>  
</div>
<style>
    *{
        margin:0;
        padding:0;
    }
    .it{
        overflow: hidden;
    }
    .left{
        width:100px;
        height:100px;
        background-color:rgb(88, 139, 122);
        float: left;
        margin-left:-100%;
    }
    .right{
        width:100px;
        height:100px;
        background-color:rgb(25, 173, 124);
        float: left;
        margin-left:-100px;
    }
    .center{
        float: left;
        height:100px;
        background-color:rgb(15, 53, 40);
        width:100%;
    }
    .in{
        margin:0 100px 0 100px;
    }