简单总结常见布局，双飞翼，圣杯，两列，居中

自己总结了下常见得布局(其实有些用的比较少，但是面试题容易考)

1. 两列布局

   左边固定右边自适应（内容高度记得写min-height,不然高度太小底部会留白）
   左右常用方法：
   1.calc计算右边宽度
   2.左边脱离文本流，右边不要写宽度自动占满父级，然后margin-left给左边留空间
   

2. 双飞翼布局
   

   方法：为了实行重要的先加载，左右dom结构是 中 左 右
   1.中左右全部浮动,中间宽度100%，左右200px
   2.左边用margin: -100% //100%是继承父级的100%
       可以强行把左边挤上去
    右边margin: -200px //同理强行挤上去，但是挤到右边
   3.可以看到中间被遮住一部分，所以往中间在加个div,并设置
       margin: 0 200px;
       就可以隔出距离，这个div作为真正的中间
   

3. 圣杯布局：
   
   方法：同双飞翼一样的道理，唯一不同的是通过父级的padding来隔出
   距离。然后将左右两边通过相对定位去占那个空白，所以他们共同的
   父级不能设置宽度100%;
   1.–同上
   2.–同上
   3.父级添加padding: 0 200px;左右添加相对定位，左 left :-200px;
   右right : -200px;

   4.上下左右居中布局：
   元素高度可变，需要元素内部元素水平垂直居中（主要是垂直）方案
   1：通过display:table实现，给最外部元素display:table，同时添加一个次外层元素,设置display:table-cell，vertical-align: middle;这时第三层的元素即可垂直居中。

<div class="container">
        <div class="box">
            <span></span>
        </div>
    </div>

    .container {
        display:table;
        width:50%;
        height:50vw;
        margin: 0 auto;
    }
    .box {
        display: table-cell;
        vertical-align: middle;
        background: gray;
    }
    .box > span {
        display: block;
        width: 20px;
        height: 20px;
        background: #ff0000;
        margin: 0 auto;
    }

2:通过flex布局，容器元素设置为justify-content：center，align-items:center;
3:通过grid布局，容器元素设置为justify-content：center，align-items:center;
4:通过position + transform（margin）实现,如果使用margin则需要知道子元素的宽高且这个宽高不可变（这是由于magin如果设置为百分比是基于父元素的widht来计算的），如果使用transform则没有这个限制（transform的值是基于元素本身的widht和height来计算的），但又一点兼容的问题（推荐使用transform的方式）

<div class="container">
        <div class="box">
        </div>
    </div>

    .container {
        background: yellow;
        width:50%;
        height:50vw;
        margin: 0 auto;
    }
    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%;
        margin: -50px 0 0 -50px;
	//transform: translate(-50%, -50%);
        background: green;
    }