CSSボックスモデルのサイズを計算する方法

標準ボックス モデルのサイズは「コンテンツの幅と高さ、両側のパディング サイズ、両側の境界線のサイズ」ですが、IE ボックス モデルのサイズは直接: "コンテンツの幅と高さ" 、ボックスによって設定された幅/高さ属性は、ボックス自体の全体のサイズです。パディングまたは境界線がある場合、コンテンツ領域を縮小することによって実現されます。

このチュートリアルの動作環境: Windows7 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

(推奨チュートリアル: CSS ビデオ チュートリアル )

ボックス モデル (Box Modle) を使用して、実際のコンテンツ (content) やパディング (padding) を含む要素をレイアウトできます。 ）、ボーダー（枠線）、マージン（余白）。

1. ボ​​ックス モデルの分類

ボックス モデルは、ボックス モデル (変なボックス モデル) と標準の w3c の 2 つのタイプに分類されます。ボックスモデル。

2. 標準モデルとIEモデルのサイズ計算

#1. 標準ボックス サイズの計算

#ボックス自体のサイズ: コンテンツの幅と高さ、コンテンツのサイズ両側の内側の余白 側枠のサイズ

ページ上でボックスが占めるボックスのサイズ: コンテンツの幅と高さ、両側の内側の余白、外側の余白境界線の両側

#2. IE ボックスのサイズの計算

ボックス自体のサイズ: コンテンツの幅と高さ

ページ上で占めるボックスのサイズ: コンテンツの幅と高さ、および両側の余白

IE ボックス 幅/高さ属性をボックス自体の全体のサイズに直接設定します。パディングまたは境界線がある場合、これはコンテンツ領域を縮小することによって実現されます。プログラミング関連の知識の詳細については、次を参照してください:

プログラミング入門

! ！

以上がCSSボックスモデルのサイズを計算する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。