CSSでのボックスサイジングの簡単な説明（標準ボックスモデルと奇妙なボックスモデル）_html/css_WEB-ITnose

今日、レイアウトを行うプログラムを書いているときに、CSS のボックス モデルに関する問題に遭遇しました。私は頭が悪く、文章がわかりにくいです。どうすればいいでしょうか? それで、自分でプログラムのテストを書いたのですが、その効果を見て、私は突然理解しました。以下に簡単に説明しますが、表面的かもしれません。しかし、フロントエンドの友人たちの助けになれば幸いです。

まず、box-sizing の値について説明します。box-sizing には、inheirt、content-box (標準ボックス モデル)、border-box (非標準ブラウザの奇妙なボックス モデル) の 3 つのオプションの値があります。 ie6) );

まず最初の値 content-box について説明します。これは box-sizing のデフォルト値です。これは、要素が実際に占めるスペースの幅 = 設定した幅 (幅) + 境界線 + 内部のスペースを意味します。 div の幅を 100px に設定すると、この div の境界線と間隔を設定すると、境界線と間隔が外側に広がります。実際の div の実際の幅は 100px より大きくなります。上記のコードと図は一目瞭然です。

まず、幅と高さが 100px の div を定義し、box-sizing を content-box に設定し、背景を赤に設定します。強調表示するには、青い背景に配置します。

<div id="bx1" style="width:300px;height:300px;background:blue;">        <div id="bx2" style="width:100px;height:100px;background:red;margin:0px auto;box-sizing:content-box;"></div></div>

次のように表示されます:

比較しやすいように、新しい div を追加します。前の div との唯一の違いは、黄色の 10 ピクセルを追加したことです。 Border;

<div id="bx1" style="width:300px;height:300px;background:blue;">        <div id="bx2" style="width:100px;height:100px;background:red;margin:0px auto;box-sizing:content-box;"></div>        <div id="bx3" style="width:100px;height:100px;background:red;margin:10px auto; box-sizing:content-box;border:10px solid yellow"></div></div>

結果は図に示すように、境界線が div の外側に拡張されます。

新しく追加した div に 10 ピクセルのパディングを追加します。 図に示すように、パディングも外側に拡張されます。 なぜ「hello」の位置に注目してください。 」。

#bx3{padding:10px;}

さて、1 つの属性についての話は終わったので、もう 1 つの属性であるボーダーボックスの話から始めましょう。元の div のボックス サイズをボーダー ボックスに変更します。

ボーダーボックスが内側に拡張されます。 box-sizing を border-box に設定すると、要素が実際に占めるスペースの幅は、border と spacing を設定した場合、内側に拡張されます。元の例をもう一度見てみましょう。 (強迫性障害患者であること、そして私はまだ完璧を追求していることをお許しください)

<div id="bx1" style="width:300px;height:300px;background:blue;">        <div id="bx2" style="width:100px;height:100px;background:red;margin:0px auto;color:white;box-sizing:border-box;">hello</div></div>

境界線と間隔のない最初の画像:

これで、比較のために新しい div が追加されました。元の div との唯一の違いです。幅が 10 ピクセルの黄色の境界線がさらにあるということです

<div id="bx1" style="width:300px;height:300px;background:blue;">        <div id="bx2" style="width:100px;height:100px;background:red;margin:0px auto;color:white;box-sizing:border-box;">hello</div>        <div id="bx3" style="width:100px;height:100px;background:red;margin:0px auto;color:white;box-sizing:border-box;border:10px solid yellow">hello</div></div>

結果は次のようになります: 境界線は内側に拡張します

次に、div に 10 ピクセルの内側マージンを追加します

#bx3{padding:10px;}

結果は次のようになります。内側のマージンが内側に移動して拡張します。「hello」の位置に注意してください。

ここで、皆さんはこれら 2 つの属性について明確にする必要があると思います。

まとめると、box-sizing には context-box、border-box、inherit の 3 つの値があります。Content-box は box-sizing のデフォルト値であり、要素が実際に占めるスペースの幅 = width を意味します。 (幅) + 境界線 + 内側の間隔を設定します。div の幅を設定した後、境界線と間隔を追加し、境界線と間隔を外側に拡張します。 border-box 要素が実際に占めるスペースの幅は、設定した幅と同じになります。ボーダーとスペースが設定されている場合、ボーダーとスペースは内側に広がります。継承属性に関しては、それが持つ属性をすべて継承することを誰もが知っているはずです。ほんの小さなことだったけど、とても長くて、最後に世界の元祖完璧主義者で強迫性障害の患者さんたちに問いかけました。