冬休みフロントエンド学習(9) ～CSSボックスモデルと幅と高さの計算を理解する_html/css_WEB-ITnose

ボックスモデルはCSSの中核となる知識であり、しっかりと習得していないと実際の作業で混乱しやすい知識です。今回の記事はCSSボックスモデルの計算方法という1つの問題を主に解決します。その他の知識については、自分で思い出して復習するということになります。

ボックスモデルの構成

ボックスモデルの構成については、フロントエンドの基礎知識とされています。これに関する知識はインターネット上にたくさんあります。そこで、ここでは Chrome ブラウザ コンソールのボックス モデル図を使用します。 (結局のところ、実際の開発環境に最も近いです)

ボックスモデルは、margin、border、padding、content (中央に 0x0 があるボックス) の 4 つの部分で構成されていることがわかります。

視覚的に理解したい場合は、栗をあげましょう〜

ここには倉庫があり、倉庫にはあらゆる種類の箱があります。ウェアハウスは Web ページを表し、ボックスは独立した div を表します。

2 つのボックス間の隙間は余白です。

もちろん、ボックスには独自の枠線があり、各ボックスの枠線の太さは異なります。この境界線が境界線です。太さは枠線のサイズです。

もちろん、箱の中にはあらゆる種類の商品が入っています。箱の中の商品はすべて中身です。

ただし、商品が箱に収まらない可能性があるため、商品を除いた箱の空の部分はパディングと呼ばれます。

これが実際のボックスモデルについての私の理解です。

ボックス モデルの幅の計算

ボックス モデルの幅の計算は複雑ではありませんが、楽しいものでもありません。ボックスモデルの幅は、そのコンテンツの幅を計算するだけでなく、要素の境界線とパディングも追加するためです。

デモを使うとわかりやすいです。デモでは、2 つの div の幅は同じです。 (デモソースは一番下にあります)

.simple { width: 500px; margin: 20px auto;}.fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px;}

しかし、実際の状況は次のようになります:

これは、ボックスモデルが幅を計算するときにパディングとボーダーの幅を追加するためです。したがって、2 番目の要素は最初の要素よりも大きく見えます。

これは、ボックス モデルの幅を計算するのが面倒なため、あまり適していません。そこでその後、この問題を解決するために、CSS3 のボックス モデルに新しい属性 box-sizing が追加されました。

CSS3 box-sizing

box-sizing には 2 つのプロパティがあります。1 つは content-box で、もう 1 つは border-box です。

content-boxに設定した場合、ボックスモデルの幅の計算方法はCSS2.1と同じで、パディングとボーダーが計算されます。そこで、ここではボーダーボックスに焦点を当てます。

ボックス モデルを box-sizing: border-box に設定すると、ボックスのパディングとボーダーの幅が増加しなくなります。

引き続き 2 番目のデモを見てください。ここでは、box-sizing: border-box をすべてのボックス モデルに一律に設定します。

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.simple { width: 500px; margin: 20px auto;}.fancy { width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px;}

すると、効果はこんな感じになります。

2 つのボックス モデルの幅が同じであることがわかります。

これは、以前に設定された幅が要素の幅であるためです。パディングと境界線は要素の幅の外側に描画されます。

border-box を設定すると、パディングとボーダーの両方が設定された幅内に描画されます。要素の幅は、設定された幅からパディングとボーダーを差し引いて計算する必要があります。

分かりやすいでしょうか？高さについても計算原理は上記と同様です。ここでは詳細には触れません。

ヒント

これは、Web ページを作成するときによく遭遇する問題です。つまり、要素の背景を設定するときに、背景色の範囲に内側の余白が含まれてしまいます。

まとめ

概要としては、このセクションが私にとって最も理解しやすい部分です。以前は盲点や困難ばかりでしたが、ここでは漠然としか理解できませんでした。資料を見てすぐに理解できました。それから、よく考えて、ブログを書くことにしました。なぜなら、良い記憶力は、悪い文章ほど良くないからです~

さらに詳しく知りたい学生は、それをクリックすることもできます。

フロントエンドの道は長いですが、歌って行きます〜

参考リンク：