div{
box-sizing:border-box;
width:200px;
padding:20px;
border:1px Solid red;
}
このCSSは、divを意味します200ピクセル、境界線は 1px、左右のマージンは 20px、時間コンテンツの幅は 200-2-20*2=158px です。
box-sizing の値が content-box の場合、それは設定されていることを意味します。これは、div ボックスの幅ではなく、コンテンツ領域の幅です。
ブラウザの互換性:
ie8 以降はこの属性をサポートしており、Firefox はブラウザの製造元のプレフィックス -moz- を追加する必要があります。 IOS および Android ブラウザの以前のバージョンでも -webkit-
*,*:before,*:after{
-moz-box-sizing:border-box;
-webkit-box-sizing:border を追加する必要があります-box;
box-sizing: border-box;
}