0

良い一日！今日、私は独特の問題に遭遇しました。少し奇妙ですが、新しいことを学ぶことができたので、実際に遭遇してとても幸せです.

私の理解では、余白 (純粋な css ポジショニング atm について話している) は、要素が入っているコンテナーに基づいています
。上から 2% 相当のピクセルの後に配置されます。そして、コンテナーがない場合、ブラウザーがウィンドウの境界を考慮に入れることは論理的でした。明らかに、この理解は間違っています。divwidth Xheight Ymargin-top : 2%

どのようにしてこの結論に達したか: 次のことを考慮してください。バナー、上から 1%、ログイン ボックスが上から 2%、コンテンツ フィールドが上から 8% です。(左余白の値もありますが、これに対する解決策はそれらに対する解決策でもあるため、無関係です)

実際に起こることは、マージンが最後の要素の後に取られることです。これは、ログイン ボックスがメニュー ボックスの 2% 後にスタイル設定されることを意味します。これは、以前のすべてのオフセットの合計であるオフセットでスタイル設定されることを意味します。要素。

私の質問は、どのように対処するのですか？前の要素ではなく、ウィンドウの境界線にマージンを取るにはどうすればよいですか?

また、誰かが私が書いたものに正確に興味を持っている場合に備えて、ソースコードを次に示します。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
<style>

    .menu {
    width:600px;
    height:100px;
    background-color:black;
    margin-top:1%;
    margin-left:33%;
    float:left;
    }

    .login {
    width: 150px;
    height: 200px;
    background-color:red;
    margin-top:2%;
    margin-left:87%;
    float:none;
    }

    .content {
    width:600px;
    min-height:300px;
    background-color:blue;
    float:left;
     margin-top:1%;
    margin-left:33%;
    }

    .flush {
        clear: both;
    }

    body {
    background-color:#daeaf1;
    }
</style>
</head>
<body>
  <div class="menu"></div><div class="login"></div><div class="content"></div>
</body>
</html>
4

1 に答える 1