三栏布局 、垂直中间自适应布局，CSS实现自适应下保持宽高比，垂直居中

1，三栏布局的几种方式：

1，圣杯（直观，需要定位,padding,但是如果宽度较小的话排版会乱，因为有个padding-left）
2，双飞翼（简洁，通过margin定位，解决了圣杯的问题，）
3，flex布局 (缺点：兼容性)
4，网格grid布局
5，绝对定位
6，表格
7,calc计算

1，圣杯布局

 <style>
        .container{
   
            padding-left: 200px;
            padding-right: 100px;
        }
         .container>div{
   
            float: left;
            height: 200px;
        }
        .center{
   
            width: 100%;
            background-color: aqua
        }
        .left{
   
            width: 200px;
            position: relative;
            margin-left: -100%;
            right: 200px;
            background-color: aliceblue
         }
         .right{
   
             width: 100px;
             margin-right: -100px;
             background-color: antiquewhite
         }
    </style>
    <div class="container">
        <div class="center con"></div>
        <div class="left con"></div>
        <div class="right con"></div>
    </div>

2,双飞翼布局

   <style>
      .wrapper {
   
                padding: 0;
                overflow: hidden;
            }
            .col {
   
                float: left;
            }
            .main {
   
                width: 100%;
                background-color: red;
            }
            .main-wr