box-sizing プロパティを使用すると、特定の方法で特定の領域に一致する特定の要素を定義できます。
たとえば、枠線付きの 2 つのボックスを並べて配置する必要がある場合、box-sizing を「border-box」に設定することでこれを行うことができます。これにより、ブラウザーは指定された幅と高さでボックスをレンダリングし、ボックス内に境界線とパディングを配置します。
デフォルト: 継承: バージョン: JavaScript 構文:content-box |
no |
CSS3 |
object.style.boxSizing="border-box" |
ボックスのサイズ: content-box | border-box
デフォルト値: content-box
content-box:
パディングとボーダーは、定義された幅と高さに含まれません。オブジェクトの実際の幅は、設定された幅の値とボーダー、パディング、マージンの合計に等しくなります。つまり、(要素の幅 = 幅 + ボーダー + パディング + マージン)
この属性は、標準モードのボックス モデルのように動作します。
border-box:
パディングとボーダーは、定義された幅と高さ内に含まれます。オブジェクトの実際の幅は、設定された幅の値と等しくなります。ボーダーとパディングが定義されている場合でも、オブジェクトの実際の幅は変更されません。つまり、(要素の幅 = 幅)
この属性はボックス モデルのように動作します。変なモードで。
例:
rree