网页布局（流式布局、flex布局、网格布局、圣杯布局、双飞翼布局）

1、流式布局

首先写一个大的盒子section让他的宽度为100%然后设置一下最小、最大宽高，然后在里面装两个div让div的宽度设成我们需要的百分比，比如我下面的50%和50%。

2、flex布局

flex布局又称弹性盒子 ，定义flex布局他的子盒子自动变成了行内内块元素，就像浮动一样（没有行内块元素的间距），但是他不用清除浮动。

（注意：flex布局不会像浮动那样自动换行必须定义使其换行）

   <div class="w faxian">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
   </div> 

css

.faxian {
    display: flex;
    height: 340px;
    margin: 20px auto;
    flex-direction: row;
    justify-content: space-between;
}

.faxian>div {
    width: 290px;
    height: 100%;
    background-color: #fff;
}

3、网格布局

相对于flex布局网格布局也是比较常用的，网格布局可以设置为块级或者行内块，网格布局会自动换行，不会有什么主轴和副轴。

 <div class="banner_left">
     <ul>
         <li>
             <a href="#"><img src="upload/tubiao1.png" alt=""> 1
             </a>
         </li>
         <li>
             <a href="#"><img src="upload/tubiao2.png" alt="">2
             </a>
         </li>
         <li>
             <a href="#"><img src="upload/tubiao3.png" alt="">3
             </a>
         </li>
         <li>
             <a href="#"><img src="upload/tubiao4.png" alt="">4
             </a>
         </li>
         <li>
             <a href="#"><img src="upload/tubiao5.png" alt=""> 5
             </a>
         </li>
         <li>
             <a href="#"><img src="upload/tubiao6.png" alt=""> 6
             </a>
         </li>
     </ul>
 </div>

css

.banner .banner_left ul {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background-color: #5f5c50;
    padding: 3px;
}

4、圣杯布局

一个大的盒子不设置宽高，只一个左右的内边距，然后在大盒子里面写三个小的盒子分别放在两边和中间，中间的盒子给个高度，宽度100%，两边的盒子用定位和margin-left负值把两个盒子弄上。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .da {
        padding: 0 100px;
    }
    
    .da .center {
        height: 200px;
        width: 100%;
        background-color: pink;
        float: left;
        position: relative;
        text-align: center;
        line-height: 20px;
    }
    
    .da .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-left: -100%;
        background-color: blue;
        position: relative; 
        right: 100px;
    }
    
    .da .right {
        float: left;
        height: 200px;
        width: 100px;
        margin-left: -100px;
        background-color: red;
        position: relative;
        left: 100px;
    }
</style>

  <div class="da">
      <div class="center">好好学习</div>
      <div class="left"></div>
      <div class="right"></div>

5、双飞翼布局

个大的盒子不设置宽高，只一个左右的外边距，然后在大盒子里面写三个小的盒子分别放在两边和中间，中间的盒子给个高度，宽度100%，两边的盒子用margin-left负值把两个盒子弄上。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .fei .center,
    .fei .left,
    .fei .right {
        float: left;
    }
    
    .center {
        width: 100%;
        height: 200px;
        text-align: center;
        line-height: 200px;
        background-color: bisque;
    }
    
    .left {
        width: 100px;
        height: 200px;
        margin-left: -100%;
        background-color: blue;
    }
    
    .right {
        width: 100px;
        height: 200px;
        margin-left: -100px;
        background-color: chartreuse;
    }
</style>

<div class="fei">
    <div class="center">天天向上</div>
    <div class="left"></div>
    <div class="right"></div>
</div>