【HTML & CSS】CSS3のbox-sizingプロパティ

私はプログラマーなので、普段はCSSはほぼ触りません。
でも今日はCSS3で導入されたbox-sizingプロパティを使って驚きました！
box-sizingが便利～っ！　　　　・・・てことに驚いたんじゃありません。
borderやpaddingでボックスサイズが変わる事を初めて知りました！
box-sizingの機能が標準だと思ってました(；・∀・)
いやぁ無知って恐ろしいですなぁ

ボックスの標準の動きのおさらい

width:100px; height:100px; を指定したdivです。



標準のdivに罫線10pxを指定したdivです。
罫線の分が増えたので、高さ：120px、幅：120pxです。



さらにpadding: 10pxを指定します。
paddingの分が増えたので、高さ：140px、幅：140pxです。



罫線とpaddingを含め標準のサイズ（高さ:100px、幅:100px）で表示したければ、罫線とpaddingの分を引いて　width:60px height:60px　を指定することになります。
pxで指定されていればよいですが、width:40% で border: 5px の場合などは計算するの面倒ですね…

box-sizingを設定する

width:100px; height:100px; を指定したdivです。



罫線を10px、padding:10pxを指定したdivに「box-sizing: border-box」を指定します。



「box-sizing: border-box」を指定するとwidthとheightで指定した幅に、罫線とpaddingを含めてくれます。

box-sizingの各ブラウザ対応状況

box-sizingプロパティはCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要があります。

IE	IE8よりサポート
Chrome	Chrome10よりサポート
Firefox	Version29よりサポート
Safari	Safari5.1よりサポート
iOs	iOS5.0よりサポート
Android	Android4.0よりサポート

Android4.0以前に対応するためにはベンダーブレフィックス「-webkit-」を使用します。
2014年時点でAndroid4.0以前のシェアも約半数あるので、指定しておく方がよいかもしれません。

FireFoxのVersion29は2014/04/29にリリースされました。
もうしばらくの間、ベンダープレフィックス「-moz-」を指定しておく方がよいかもしれません。

というわけで、box-sizingの指定の仕方は下記のようになります。（※2014年7月時点）

.box{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

box-sizingを使う使わないはサイト全体で統一していた方が良いと思いますので、ユニバーサルセレクタで指定する方がよいかもしれません。

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}