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%。

 

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

上一篇:tomcat下部署的静态html页面在ie11乱码


下一篇:汇总HTTP响应代码参数