css技巧

纯css实现宽度永远是高度的两倍

• 方法一：

原理：margin/padding（-top/bottom/left/right）的值为百分比时（%），为其父元素（即例中father）的宽度的百分之多少；

缺点：生成的块是content是0；里面内容会被挤出；

<div class="father">
    <div class="son"><span>A<span></div>
</div>

/*father铺满页面*/
.father{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: red;
}
/*son 的宽永远是高的两倍*/
.son{
    height:  0;
    width: 100%;
    padding-top: 50%;
    background: blue;
}

各种居中

https://segmentfault.com/a/1190000014116655#articleHeader1