css3: ボックス モデルとボックス サイズのプロパティ

文書内の各要素は長方形のボックスとして表示されます。レンダリング エンジンの目的は、これらのボックスのサイズ、プロパティ (色、背景、境界線など)、および位置を決定することです。 CSS では、これらの長方形のボックスは標準のボックス モデルを使用して記述されます。このモデル は、要素が占める空間 を記述します。各ボックスには、マージン、ボーダー、パディング、コンテンツの 4 つのボーダーがあります。

• W3C モデルの場合: 合計幅 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

• IE モデルの場合: 合計幅 = 左マージン + 幅 + マージン右

box-sizing 属性は CSS3 で導入され、デフォルトの CSS ボックス モデルが要素の幅と高さを計算する方法を変更できるようになります。

2 つのオプションが含まれます:

• content-box: 標準のボックス モデル。CSS で定義された幅と高さには、コンテンツの幅と高さのみが含まれます。 (デフォルト)

• border-box: IE ボックス モデル。CSS によって定義された幅と高さには、コンテンツ、パディング、ボーダーが含まれます

例:

(con1 は box-sizing: border-box に設定されており、con はデフォルトの content-box です)

リーリー

コンソール上の 2 つのボックスの違いがはっきりとわかります

最初の div のボックス モデルは次のとおりです: content-box

2番目のdivのボックスモデルは次のとおりです: border-box