Question

据我所知，当css百分比用于相对元素的属性值时，此元素会检查其父元素的值，并根据此父级大小调整大小。

绝对元素的情景是什么？我正在浏览一个css文件，我发现了这个：

html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

在绝对元素上有百分比可以获得浏览器的宽度和高度吗？

Answer 1

当元素具有position:absolute时，width和height百分比将根据整个浏览器维度计算。

见下面的代码：

<html>
    <head>
        <style>
            #a {
                position: absolute;
                width:50%;
            }
        </style>

    </head>
    <body onload="alert(document.getElementById('a').offsetWidth);">
        <div style="width:200px;">
            <div id="a">Hello</div>
        </div>
    </body>
</html>

即使父div的宽度仅为200px，元素也会显示浏览器宽度的一半。

将其更改为position:relative;后，提醒会显示100。

浏览器的宽度和高度是否为绝对元素的百分比值？

1 个答案: