zoukankan      html  css  js  c++  java
  • 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;
                 4%;
                height: 0;
                padding: 4% 0 0;

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

    琥珀君的博客
  • 相关阅读:
    读取points文件
    JSP语法1
    servlet与SSI
    JDBC连接数据库
    django开发Blog(2)
    django开发Blog(1)
    JSP学习2:useBean动作标签
    django开发Blog(4)
    Servelet基础
    servlet会话管理2
  • 原文地址:https://www.cnblogs.com/eliteboy/p/13212694.html
Copyright © 2011-2022 走看看