[CSS3 プロパティを 1 日 1 つ学習] 1 つ: box-sizing_html/css_WEB-ITnose

box-sizing は CSS ボックス モデルを変更するために使用され、それによって要素の幅と高さの計算方法が変更されます。

box-sizing の値は次のとおりです:

box-sizing: content-box | padding-box | border-box

デフォルト値は content-box で、これは CSS2.1 仕様の標準ボックス モデル計算方法に対応します。つまり、幅と高さはコンテンツ領域の幅と高さ (境界線、内側のマージン、外側のマージンを除く)

パディングボックス MDN によると、幅と高さには、境界線と外側のマージンを除いたコンテンツ領域と内側のマージンが含まれます。 ;

border-box には、マージンを除いたパディングとボーダーが含まれます。これは、IE Quirks モードで使用されるボックス モデルです。

example（Mdnから）これは Explorer 9 には当てはまりますが、Chrome 24 には当てはまりません (他のブラウザはテストされていません)。IE9 の currentStyle は正しい高さの値を返せないことに注意してください。

Firefox 18 および IE9 以降のバージョンについては、まだテストしていません。

jQueryの.width()と.height()の戻り値について

jQuery 1.8ではbox-sizingのサポートが追加されましたが、これは要するにブラウザがbox-sizingをサポートしているかどうかにも関係します。バージョン 1.8、.width() および .height() は常にコンテンツ領域の幅と高さを返します。次のコードを参照してください:

1 /* support Firefox, WebKit, Opera and IE8+ */2 3 .example {4   -moz-box-sizing: border-box;5        box-sizing: border-box;6 }

各ブラウザの印刷結果は次のとおりです

IE6/7: 500

IE8 /9/10: 480

Safari5/6: 480

Chrome21/Firefox14: 480

IE6/7 はボックスサイズ変更をサポートしていないため、コンテンツ領域の幅は 500 であるため、出力値も 500 になります。他のブラウザではこの属性がサポートされていますが、ブラウザの場合、コンテンツ領域の幅からパディングとボーダーの値を引いた値は 480 になります。

もう 1 つは、jquery の .outerWidth() メソッドと .outerHeight() メソッドは影響を受けません。