あなたの次のプロジェクトで使用する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 すべてのプロジェクトで!
    ✌️