首页 > Web开发 > 详细

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

时间:2020-06-30 12:49:59      阅读:64      评论:0      收藏:0      [点我收藏+]

 

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中通过定义宽度的百分比 自动计算高度的尺寸 和高度保持一致大小

原文:https://www.cnblogs.com/eliteboy/p/13212694.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!