圣杯布局margin-left+float原因：www.cnblogs.com/vivenZ/p/70…
-margin通俗点说，就是将盒子的大小减小，但是不影响显示。
当给一个盒子宽度为200px添加一个margin-left:-200px的时候，其实整个盒子的宽度已经是 0
两列布局
居中布局
水平居中
- 行内元素 ---给行内元素父元素使用text-align: center
- 块级元素---块级元素使用margin: 0 auto。
- 若子元素包含float,为了让子元素水平居中,可让父元素宽度设置为fit-content,并且配合margin。fit-content + margin: 0 auto
- flex + justify-content: center
- absolute + transform
- 已知宽度: absolute + 负值的margin-left
垂直居中
- 已知父元素高度情况: line-height: height若元素是单行文本, 则可设置 line-height 等于父元素高度。
- 已经父元素高度: 若元素是行内块级元素如img, 可以使用display: inline-block, vertical-align: middle和一个伪元素。
- flex + align-items: center
- absolute + transform
- display: table。子元素：display: table-cell;vertical-align: middle;
水平垂直居中
- absolute + transform
- flex
- table水平垂直居中
- 知道父元素高度,子元素高度 方法: 绝对定位方式+四个方向置0 + margin: auto
