css - 手写画自适应的正方形

方法一： 

　　利用css3的vw，相对视窗宽度

　　1vw = 1% viewport width

　　.square{

　　　　width: 50%;

　　　　height: 50vw;

　　}

　　缺点： 浏览器兼容不好

方法二： 

　　css盒模型，margin和padding的百分比数值计算：margin和padding的百分比数值是相对父元素宽度的宽度计算的。将元素垂直方向的padding值设为与width相同的百分比就可以

　　.square{

　　　　width: 50%;

　　　　padding-bottom: 50%;

　　　　background: red;

　　　}

　　此方法有副作用，当内容有高度时，会高度溢出。会导致在元素上设置的 max-height 属性失效：

方法三：

　　利用伪元素的margin（padding）-top撑开容器

　　.placeholder {
　　　　width: 50%;
　　　　background:green;
　　}

　　.placeholder: after {
　　　　content: ' ';
　　　　display: block;
　　　　padding-top: 100%;
　　}