あなたの次のプロジェクトで使用する1の奇妙なCSSプロパティ

この記事はもともと公開されたmy blog
まず、CSSボックスモデルをよく理解する必要があります.
あなたが既にボックスモデルを知っているならば、次のセクションでクイズにスキップしてください

ボックスモデル

ボックスモデルは、1つのHTML要素の基本構造を説明します.これはスケールしないので注意してください、したがって、ピクセルはイメージで一致しません!

青のドットボックスはwidth x height HTML要素の内容

紫色のスペースは、空のスペースでコンテンツを囲むHTML要素のパディングです

ボーダーはHTML要素の周りの行です.要素の周囲に境界線を設定するために使用します.

マージンはパディング(空のスペース)のようなものですが、境界線の外側に移動します.

理解?良いあなたはクイズの準備が整いました

クイックCSSクイズ

あなたが幅の幅を持つdivを持っていると想像してください50px , 高さ5px , エー1px ボーダーアンド10px パディングのすべての周り.
ボーダーとパディングを含むこのdivの幅は何ですか?
⏳
⏳
⏳
⏳
⏳
⏳

Answer: 72px

その答えを得るためには、1の幅から始めなければなりませんでした50px の左側と右側を追加します2px 最後に、左側と右側のパディングを追加する20px .

しかし、それはこの方法である必要はありません！

なぜ我々はすべてのこれらの計算をdivの単純な幅を測定する必要がありましたか?なぜCSS幅が実際にDIVの幅を参照できないのでしょうか?
まあ我々は使用できる別のボックスモデルです!

ボックスサイズのCSSプロパティ

まず最初に、デフォルト値を越えますbox-sizing , はcontent-box . それでは別の設定をしましょう.border-box !
要するにcontent-box CSSの幅と高さのプロパティは、パディングとボーダーを含まないHTMLコンテンツの幅と高さを参照します.
With border-box widthおよびheightプロパティは、パディングとボーダーを含むHTMLの幅と高さを指す.

content box (デフォルト)

If box-sizing: content-box プロパティが設定されている場合、WidthプロパティとHeightプロパティはコンテンツセクションにのみ適用されます.HTML要素全体の幅が72px , 余分を含む20px パディングと2px 境界から.結果の高さは5px .

✨ボーダーボックス✨

If box-sizing: border-box プロパティを設定すると、幅と高さのプロパティが要素全体に適用されます.コンテンツセクションはパディングとボーダーを含めて計算され、子要素全体の幅は0です50px コンテンツ幅で28px , パディング20px and 2px 境界線.コンテンツの高さを計算する0 だって10px 上部と下部のパディングを満たす5px 高さ要件.

遊べるコディン

私はCodepenでデモをしました!お気軽に検査官を開き、変更幅を参照してください.
ボックスのサイズを設定すると、幅が72px .
ボックスサイジングプロパティがボーダーボックスに設定されている場合、幅は1です50px !
https://codepen.io/abdisalan/full/NWqNYgJ

歴史

もちろん、あなたはインターネットエクスプローラーに言及することなく、ウェブの歴史について話すことができません.
幅と高さがパディング+ボーダーを含んでいる境界ボックスモデルは、Internet Explorerによって使用されて、普及しました.対照的に、World Wide Web Consortium(W 3 C)は、コンテントボックスモデルが標準であると決めました、そして、現在使用されて、最も現代のブラウザーのためにデフォルトです.

どちらがお好きですか。

私個人的に好むborder-box , しかし、彼らはそれぞれの長所と短所を持っています.どちらが好きか教えてください

border-box — あなたはパディングやボーダーを追加することについて考える必要はありません、彼らはあなたのための計算を行い、それは古いブラウザによってサポートされています.

content-box — ほとんどのブラウザのデフォルト動作.それが他の要素に合うのがより簡単かもしれないように、あなたは内容のサイズを指図することができます.

あなたの次のプロジェクトの境界ボックスを含める場合は、すべての要素に適用するには、この便利なCSSルールを使用することができます.

* {
    box-sizing: border-box;
}

あなたがこのポストを楽しんで、あなたがborder-box すべてのプロジェクトで!
✌️