Div幅にPadding_が含まれているかどうかBorder——box-sizing

CSSボックスモデルの幅には、次の2つのモードが設定されています。

width=コンテンツ幅;実際の総幅=width+padding+border;この場合widthを設定すると、コンテンツ幅は変わらず、paddingとborderを調整するとdivの実際の総幅が変化します.

width=実際の総幅;width=コンテンツ幅+padding+border;この場合widthを設定するとdivの総幅は

に変わらない.
これはcssプロパティbox-sizingを設定することによって制御されます.

W 3 CSchoolでは次のように定義されています。

box-sizingプロパティを使用すると、領域に一致する特定の要素を特定の方法で定義できます.
たとえば、枠線付きの2つのボックスを並べて配置する必要がある場合は、box-sizingを「border-box」に設定します.これにより、ブラウザに幅と高さを指定したボックスを表示し、枠線と内側の余白をボックスに挿入できます.
構文box-sizing: content-box|border-box|inherit;
値
説明
content-box
これはCSS 2による.1所定の幅高さ挙動.要素のコンテンツボックスには、幅と高さがそれぞれ適用されます.要素の内側の余白と枠線を幅と高さの外に描画します.
border-box
エレメントの幅と高さによって、エレメントの枠線ボックスが決まります.つまり、エレメントに指定した内側の余白と枠線は、設定した幅と高さで描画されます.設定した幅と高さから枠線と内側の余白をそれぞれ減算することで、コンテンツの幅と高さを得ることができます.
inherit
親要素からbox-sizing属性を継承する値を指定します.