3

私の知る限り、相対要素のプロパティ値にcssパーセンテージを使用すると、この要素はその親の値をチェックし、この親のサイズに基づいてサイズを調整します。

絶対要素のシナリオは？私はcssファイルを調べていましたが、これを見つけました：

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

ブラウザーの幅と高さを取得するために、絶対要素にパーセンテージを設定しても問題ありませんか?

4

1 に答える 1

3

要素に がある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。

于 2013-01-11T11:03:26.300 に答える