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

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

WBOY

リリース： 2016-06-24 11:52:48

オリジナル

999 人が閲覧しました

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 は正しい高さの値を返せないことに注意してください。

jQueryの.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

Safari5/6: 480

Chrome21/Firefox14: 480

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

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