CSS box-sizing プロパティは正確に何を変更しますか?

序文

box-sizing属性が要素の幅と高さを制限して、要素を「内向的」にすることができることは誰もが知っています。box-sizingでは、属性にどのような値があるか知っていますか? 対応する値はそれらの意味を表していますか? 次に、私はあなたを連れて行きます。

ボックスモデル

属性を理解するにはbox-sizing、まずボックス モデルの構造を理解する必要があります。

ボックス モデルは、4 つの「内箱」で構成されます。

それらは、内側から外側へcontent box、 、padding box、border boxおよびですmargin box。

構造図を下図に示します。

これを見れば、半分以上は理解できると思います。

これらのボックスはcontent、それぞれpadding、、、borderおよびmargin属性に対応します。

box-sizing属性

box-sizing属性が実際に変更するのは、width( height) 属性が作用するボックスです。

たとえば、要素が設定されている場合、属性が境界ボックスに作用するbox-sizing: border-box;ことを意味します。width

パディングボックス box とボーダーボックス box はボーダーボックス box に含まれているので、 sum を追加しても幅は増えませんpadding。borderこれは「内向的」です。

プロパティが設定されていない場合box-sizing、デフォルト値はbox-sizing: content-box;です。

つまり、デフォルトでは に作用widthするので、 sumを設定すると、幅が増加します。content boxpaddingborder

box-sizing属性値

box-sizing属性の値は、理論的には次の方法で記述できます。

    .box1 { 
        box-sizing: content-box; 
    } 
    .box2 { 
        box-sizing: padding-box; 
    } 
    .box3 { 
        box-sizing: border-box; 
    } 
    .box4 { 
        box-sizing: margin-box; 
    } 

実際、サポート状況は次のようになります。

     /* 默认值 */ 
    .box1 { 
        box-sizing: content-box; 
    }
    /* Firefox 曾经支持 */ 
    .box2 { 
        box-sizing: padding-box; 
    } 
    /* 全线支持 */
    .box3 { 
        box-sizing: border-box; 
    }  
    /* 从未支持过 */
    .box4 { 
        box-sizing: margin-box; 
    } 

box-sizing: padding-box;またbox-sizing: margin-box;、使用シーンが限定されるため、 の使用には対応していません。

その中で、以前box-sizing: padding-box;は Firefox ブラウザーのみがサポートされており、バージョン 50 以降はサポートされていません。

エピローグ

これでこの記事は終わりです

他のアイデアがある場合は、コメント欄でお知らせください。