CSS3ボックスサイズの検討
さほど昔ではありませんが、 ボックス Webページでは、 div, 指定します 100px 幅と高さの両方について パディング にとって 10px との境界 10px 同様に.
div width：100px;高さ：100ピクセル。パディング：10px。ボーダー：10px solid #eaeaea;
ブラウザは、ボックスのサイズを140pxに拡大します。この場合、幅と高さの合計140pxは、追加されたサイズで構成されます。 パディング そしてその 国境 次のように; 100ピクセル[幅/高さ] +（2 x 10ピクセル[パディング]）+（2 x 10ピクセル[ボーダー]）.
しかし、時にはこの結果が期待どおりにならないことがあります。時々、私達は箱が常にある必要があります 100px 追加されたパディングやボーダーに関係なく.
Webページのレイアウトを作成するときにこのような頻繁に起こる問題を克服するために、CSS3を使用することができます。 ボックスサイズ 方法を制御するプロパティ CSSボックスモデル ブラウザで動作するはずです.
ボックスサイズの使い方
の ボックスサイズ プロパティには2つの値オプションがあります。 コンテンツボックス;これはデフォルト値です。この値を使用すると、ボックスモデルは上記のように動作します。.
そして2番目のものは ボーダーボックス, ボックスのサイズが計算される場所 指定されたコンテンツのサイズを差し引くことによって パディングとボーダーを追加して.
div width：100px;高さ：100ピクセル。パディング：10px。ボーダー：10px solid #eaeaea;ボックスサイズ：ボーダーボックス。 -moz-box-sizing：ボーダーボックス。 / * Firefox 1-3 * / -webkit-box-sizing：border-box; / * Safari * /
たとえば、上で説明したようなボックスがある場合（パディングとボーダーに10ピクセルの100ピクセルの正方形）、コンテンツのサイズは次のようになります。 60px, そして箱の合計サイズは残ります 100px, ここで、減算式は次のように記述できます。 100px [幅/高さ] - （（2 x 10px [パディング]）+（2 x 10px [ボーダー]））.
- デモ
- ソースをダウンロード
ブラウザのサポート
の ボックスサイズ 財産は すべてのブラウザでサポートされています; Firefox 3.6以降、Safari 3、Opera 8.5以降、およびInternet Explorer 8以降.
そのため、ほとんどの訪問者がInternet Explorerのバージョン8未満を使用しないことがわかっている場合は、この便利な推奨事項を使用できます（Paul Irishに感謝します）。.
* 箱の大きさ：border-box; -moz-box-sizing：ボーダーボックス。 / * Firefox 1-3 * / -webkit-box-sizing：border-box; / * Safari * /
上記のスニペットは、 ボックスサイズ Webページのすべての要素に対するプロパティ.
例
このセクションでは、これをどのように利用できるかについての実際の例を紹介します。 ボックスサイズ 財産。下のHTMLマークアップに基づいて、5つのリンクメニューを含む単純なナビゲーションを作成します。.
それから、いくつかの装飾的なスタイルを追加します。など、ナビゲーションの設定 の幅を固定 500px そして それぞれ100ピクセルのリンクの幅, それからリストアイテムをインライン化して、リンクメニューごとに異なる背景を与えます。そうすれば、それらの違いを見ることができます。.
nav 幅：500ピクセル;マージン：50px auto 0。高さ：50ピクセル。 nav ul パディング：0;マージン：0。 nav li float：left;; display：inline-block;をナビゲートします。幅：100ピクセル。身長：100％。背景色：#ccc;カラー：＃555。テキスト装飾：なし。 font-family：Arial、Sans-Serif。フォントサイズ：12pt。行の高さ：300％。 text-align：center。 display：inline-block;をナビゲートします。幅：100ピクセル。身長：100％。カラー：＃555。テキスト装飾：なし。 font-family：Arial、Sans-Serif。 ナビゲーション：n番目の子（1）a 背景色：＃E9E9E9;左ボーダー：0。 ナビゲーション：n番目の子（2）a 背景色：＃E4E4E4; ナビゲーション：n番目の子（3）a 背景色：#DFDFDF; ナビゲーション：n番目の子（4）a 背景色：＃D9D9D9; ナビゲーション：n番目の子（5）a 背景色：＃D4D4D4;右ボーダー：0。
この時点では、ナビゲーションは普通に見えます.
ただし、リンクメニューに左右の枠線を追加すると問題が発生します。.
nav a border-left：1ピクセルsolid #aaa;右ボーダー：1ピクセルソリッド＃f3f3f3。
リンクの幅が狭くなっているため、メニューは一番下にオーバーフローします。 100px. 今です 102ピクセル, ナビゲーションの全幅が 10px 私達が上で指定したより長く500px）.
この問題を克服するためには、 ボックスサイズ 次のようにプロパティ。
nav a border-left：1ピクセルsolid #aaa;右ボーダー：1ピクセルソリッド＃f3f3f3。ボックスサイズ：ボーダーボックス。 -moz-box-sizing：ボーダーボックス。 -webkit-box-sizing：ボーダーボックス。
- デモ
- ソースをダウンロード
参考文献
そして最後に、あなたが冒険好きなタイプで、この主題についてもっと深く掘り下げたいのであれば、私たちはあなたのためにいくつかの選択された参考文献をまとめました：
- CSSボックスモデルを理解する - Tech Republic
- Firefoxのボックスサイズのバグ - BugZilla
- ボックスサイズのFTW - Paul Irish
