- 2009-02-19 (木)
- 技術
CSS3 Basic User Interface Module
一般的にエレメントのwidthやheightはpadding・borderなどは含まないがこれを含めるかどうか指定できるのがこのbox-sizingだそうだ。
たとえばCSS3 box-sizing attribute - Helephant.comに書いてある画像を見てもらえれば分かるが、2個のfloatしているdivタグがあり一方は「width:30%」、もう一方は「width:70%」としている。
この場合は1pxでもpadding・borderなどがあると下に滑り落ちてしまうのだが、これを防ぐためにbox-sizingを使っている。
box-sizingで指定できるのは以下の値になる。
- content-box
- padding・borderを含めない
- border-box
- padding・borderを含める
ちなみにまだOpera以外のブラウザではbox-sizingと記述しても機能しない。
独自実装な-moz、-webkit、-ms-boxをプレフィックス付与して記述する必要がある。
box-sizingを使った例
box-sizingを指定しないパターンから指定したパターンで試してもらうと分かるのですが、id="div2"が下に落っこちない！
当たり前だがmarginを指定すると落っこちます。
使えるブラウザ
- Firefox2以上
- Safari3.1以上
- Chrome0.2以上
- Opera9.6以上
- IE8以上
[via]
When can I use...
IETesterで試してみたが、一応Beta2では使えたお。
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1158
- Listed below are links to weblogs that reference
- CSS3のbox-sizingでpadding・borderをwidth、heightに含めてみる from HouseTect, JavaScript Blog
