css3ボックスmodel_html/css_WEB-ITnose

css2.1 ボックス モデル:

ボックスの幅と高さを定義すると、パディングとボーダーの値を追加すると、ボックスの幅と高さが拡張されます

ボックスの高さ =定義された高さ + (padding-top + padding-bottom)+(border-top + border-bottom);

ボックスの幅 = 定義された幅 + (padding-left+padding-right)+(border-left+ border-右);

css3.0 ボックス モデル:

ボックスの高さを定義するとき、パディング値とボーダー値を追加した後にボックス サイズが変わらない場合、ボックスはコンテンツ領域に向かって縮小します。

ボックスの高さ = 定義した高さ; ボックスの幅 = 定義した幅

使用法:

box-sizing: 要素を制御するために使用されるボックス モデルの解析モード

box-sizing:content -box | border-box | 継承;

デフォルト値は content-box: CSS3.0 より前のバージョンのレイアウトである W3C 標準ボックス モデルを維持します

Border-box: ボックス モデルで構成されるパターンを再定義します。

Inherit: 要素に親要素を継承させるボックス モデル モード。

書き方（互換性を考慮）:

’ s ‐ ‐ ‐‐moz-box-sizing: border-box; box-sizing:border-box;

="UTF-8">

< ;div class="header">ヘッダー

左列

< div class="content">メインコンテンツ

< ;div class="footer">フッター