Web開発 (4) 伝説のボックスモデル margin_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Web開発 (4) 伝説のボックスモデル margin_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:51:21

オリジナル

1438 人が閲覧しました

証拠金の利用
証拠金の重複現象
証拠金の債務返済現象

証拠金

を使用する場合は、まずコードと効果を確認してください。

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title>Margin</title>        <style>            /*清空标签默认样式*/             body,div {                border: 0;                margin: 0;                padding: 0;             }            div {                width: 100px;                height: 100px;                background-color: red;                /*使用外边距*/                margin: 10px;            }        </style>    </head>    <body>        <div></div>    </body></html>

ログイン後にコピー

margin.png を使用した場合の効果

margin の使用方法は次のようになります。パディング (マージン 1 ～ 4 の値を続けることもできます。特定の機能については、パディングを参照してください)

わかりました、簡単な使用法には触れませんが、マージンを使用する場合は、次の点に注意する必要があります。次の 2 つの状況: 1. 同じレベル間で左と右が追加され、上下が重なっています。2. 親子レベルで margin-top を使用します。最初の子供は、父親が子供の借金を支払うことになります。

マージンのオーバーラップ現象

オーバーラップとは何かを説明する前に、コードの一部を見てみましょう:

    .div1 {        width: 100px;        height: 100px;        background-color: red;        margin-bottom: 50px;    }    .div2 {        width: 100px;        height: 100px;        background-color: red;        margin-top: 30px;    }

ログイン後にコピー

ここで、.div1 と .div2 は次の div です。同じレベルの場合、2 つは上下の構造になっている必要があります。このとき、2 つの間の距離は何ピクセルになるでしょうか。 80ピクセル？それとも40px？答えは50pxです。このとき重なるという現象があるからです。端的に言えば値が大きい方です。

例を考えてみましょう。剣士 A の剣気の半径が 50 メートル、剣士 B の剣気の範囲が 50 メートルであるとします。 30メートルですので、両者の間の安全な距離はどのくらいでしょうか?答えは50メートルですよね？

ウェブでは、この現象をマージンの重複現象と呼んでいます。

マージンの負債は親によって返済されます

それでも、最初にコードを見てみましょう。しかし、今回は機能します。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Margin</title><style>    /*清空标签默认样式*/    body,div {        border: 0;        margin: 0;        padding: 0;    }    .father {        width: 300px;        height: 300px;        background-color: orange;    }    .son {        width: 100px;        height: 100px;        background-color: red;        margin-top:10px;    }</style></head><body><div class="father">    <div class="son"></div></div></body></html>

ログイン後にコピー

Margin-top が .son の選択範囲に追加されます。論理的に言えば、その効果は .son (赤いブロック) が .father (オレンジのブロック) の上部から 10 ピクセルになるはずですが、これがほんとにそうだね、お茶ひとりで話しませんか？それは問題ではありません。効果を見てみましょう:

Son は、father に借金を支払います。png

.son との間に距離がないことがわかります。父親ですが、逆に、.father は本文から 10px の上部余白があります。このとき、 借金が父親に返される 現象が発生していると言えます。分かりやすく言えば、息子が借金を返せなくなったので、その後の対応をしなければならないということです。

この現象は開発中に発生することを回避する必要があります。この現象を回避するための 3 つの比較的成熟した解決策があります。1. 親に境界線を追加します。新しい属性 overflow:hidden を親に追加します。3. マージンを適用せず、親で padding-top を使用します。 注:

子供は父親に借金を支払います

この現象は、margin-top が最初の子に使用された場合にのみ発生します。

創造は永遠です、お茶を飲みましょう...