CSS0007： CSS中通过定义宽度的百分比 自动计算高度的尺寸 和高度保持一致大小

 

1，如果是顶层DIV ，要保持宽度和高度一致

     可以直接定义宽度的尺寸为 10vw， 高度的尺寸也是 10vw，而不是10vh。

 

2，对不是顶层DIV，如何保持DIV 的宽度和高度一致：

　　

        .iframe span {
            position: absolute;
            z-index: 2;
            top: 2%;
            left: 2%;
            display: block;
            /* 这样可以确保高度按宽度自动计算 */
            font-size: 0;
            line-height: 0;
            width: 4%;
            height: 0;
            padding: 4% 0 0;
            /* height: calc(5%); */
            background: rgba(0, 0, 0, 0.3) url(images/goback.png)center/90% no-repeat;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            cursor: pointer;
        }

 

关键代码是：

            font-size: 0;
            line-height: 0;
            width: 4%;
            height: 0;
            padding: 4% 0 0;

这样定义了宽度是 4%，高度是用padding来实现的，即上边距 为 4% ，是参考宽度的，于是 高度也和宽度 一样是 4%。