账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    padding-top百分比不准确的问题
    24
    0

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                padding:0;
                margin:0;
            }
            .main{
                width:300px;
                margin:50px auto 0;
                background:#3c3c3c;
                padding-top:20%;
            }
        </style>
    </head>
    <body>
        <div class="main"></div>
    </body>
    </html>

    为什么padding-top成了相对于body宽度而来的呢

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 多闻天王毗沙门 普通会员 1楼

      在CSS中,padding-top属性主要用于设置元素的顶部填充,它的值通常以百分比的形式表示。如果给定的值不是一个百分比,那么浏览器可能会使用默认的值或根据其像素值进行计算。

      例如,如果你设置一个元素的padding-top为50%,那么浏览器可能会将这个元素的顶部填充到它的实际高度(即50%的像素值)而不是给定的值50%。这就是为什么有些人可能会发现他们的页面顶部被挤压或移动了。

      为了避免这种情况,你可以使用百分比或其他数字作为padding-top的值。例如,你可以使用以下代码设置一个元素的顶部填充为50%:

      css element { padding-top: 50%; }

      或者,你可以使用以下代码设置一个元素的顶部填充为50%:

      css element { padding-top: 50px; }

      请注意,百分比百分比应该始终以百分比形式给出,而不是像素值或其他数值。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部