CSS3ボックスのサイズ変更プロパティ
例
2つのボックスには、境界線を指定します:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
»をお試しください
ブラウザのサポート
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。
属性 | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
属性の定義と指示
ボックスのサイズ変更プロパティを使用すると、指定された領域に適応するために、いくつかの方法で、特定の要素を定義することができます。
たとえば、もしあなたは、ボックスサイズを「ボーダー・ボックス」による境界ボックスと並んで2辺を配置する必要があります。 これは、ボックスに指定された幅と高さ、境界線、およびパディングとボックスを示すブラウザを作ることができます。
デフォルト: | コンテンツボックス |
---|---|
継承: | いいえ |
バージョン: | CSS3 |
JavaScriptシンタックス: | オブジェクト.style.boxSizing = "境界線ボックス」 |
文法
ボックスのサイズ変更:コンテンツ・ボックス|ボーダーボックス|継承:
値 | 説明 |
---|---|
コンテンツボックス | これは、幅と高さが指定されCSS2.1の動作です。 幅と高さ(最小/最大属性)がボックスの幅と高さに適した要素を指定しました。 パディングと境界線、描画レイアウト以外は要素の幅と高さを指定します |
ボーダーボックス | 要素の境界ボックスを決定するために、幅と高さ(最小/最大属性)を指定します。 言い換えれば、要素はパディングとボーダーの指定を含む幅と高さを指定しました。 幅およびコンテンツの高さマイナス境界線の各辺とフィルは、幅「幅」と指定された「高さ」属性から計算されます |
受け継ぎます | 値は、ボックスのサイズ変更プロパティは親要素から継承する必要があります指定します |
関連記事
CSS3チュートリアル: ユーザーインターフェイスCSS3