CSSフォーマットモデル
CSS 2フォーマットモデル
ドキュメント内の各要素は、長方形のボックスに入れることができます.CSS 2の作成者は、これを「コアコンテンツ領域」と呼び、他の3つのボックスで囲まれています.補白、枠線、境界です.下図のように、これらのボックスが表示され、いくつかの有用な用語も定義されています.
http://www.msleft.com/review/cssmodel.html図1
上、下、左、および右の外縁は、要素のコンテンツ領域とそのすべてのホワイトニング、枠線および境界領域を定義します.内側、内側、内側、および右の内縁は、コアコンテンツ領域の範囲を定義します.要素を囲む余分なスペースは、ホワイトニング、枠線および境界を含む内側と外側のエッジの間の領域です.ブラウザは、各要素の任意またはすべての余分なスペースを省略しますまた、多くのブラウザでは、内外のエッジを省略することができます.
要素が垂直に隣接している場合、上の要素の下の境界と下の要素の上の境界は重複しています.これらの要素の間の総間隔は、襟元のエッジの大きな部分(以下の図)であるためです.このような適用は、境界重複(margin-collapsing)と呼ばれ、通常、より良いドキュメント表示の効果を得ることができます.
http://www.msleft.com/review/cssmodel.html図2 水平隣接要素に重複する境界はありません.CSS 2規格では、隣接する水平境界を加算します.図CSSフォーマットモデルに示すように、要素の総幅は、左右境界、左右境界、左右補白、要素内容そのものの7項目の和が要素の幅に等しくなければなりません.この7項目のうち、3項目(要素幅とその左右境界)のみですブラウザがそのプロパティの値を決定できることを示すauto値に設定できます.必要に応じて、ブラウズは次のルールに従います.1.これらのプロパティがautoに設定されておらず、合計幅が親エレメントの幅より小さい場合、margin-rightプロパティはauto値に設定され、合計幅が親エレメントの幅に等しくなるように十分に大きくすることができます.
2.適切にautoに設定されている属性がある場合、その属性は親要素の幅に等しくなるように十分に大きくなります.
3.width、margin-left、margin-rightの両方がautoに設定されている場合、CSS 2互換ブラウザはmargin-leftとmargin-rightを0に設定し、widthが親要素の幅に等しくなるように十分に大きく設定します.
4.左右の境界がautoに設定されている場合、親要素の中で常に同じ値に設定されます.
フローティング要素にはいくつかの特殊なルールがあります.フローティング要素(align=leftとして指定された画像など)の境界は、フローティング要素に負の境界がない限り、次の図のようにHTMLの機能がどのように実現されているかを示しています.
http://www.msleft.com/review/cssmodel.html
図3
ブラウザは、可能な限り画像とその境界を段落の左上に移動しますが、段落やドキュメントの本文の左境界や上境界とは重なりません.段落や本文の左境界は、上境界が重なります.
ドキュメント内の各要素は、長方形のボックスに入れることができます.CSS 2の作成者は、これを「コアコンテンツ領域」と呼び、他の3つのボックスで囲まれています.補白、枠線、境界です.下図のように、これらのボックスが表示され、いくつかの有用な用語も定義されています.
http://www.msleft.com/review/cssmodel.html図1
上、下、左、および右の外縁は、要素のコンテンツ領域とそのすべてのホワイトニング、枠線および境界領域を定義します.内側、内側、内側、および右の内縁は、コアコンテンツ領域の範囲を定義します.要素を囲む余分なスペースは、ホワイトニング、枠線および境界を含む内側と外側のエッジの間の領域です.ブラウザは、各要素の任意またはすべての余分なスペースを省略しますまた、多くのブラウザでは、内外のエッジを省略することができます.
要素が垂直に隣接している場合、上の要素の下の境界と下の要素の上の境界は重複しています.これらの要素の間の総間隔は、襟元のエッジの大きな部分(以下の図)であるためです.このような適用は、境界重複(margin-collapsing)と呼ばれ、通常、より良いドキュメント表示の効果を得ることができます.
http://www.msleft.com/review/cssmodel.html図2 水平隣接要素に重複する境界はありません.CSS 2規格では、隣接する水平境界を加算します.図CSSフォーマットモデルに示すように、要素の総幅は、左右境界、左右境界、左右補白、要素内容そのものの7項目の和が要素の幅に等しくなければなりません.この7項目のうち、3項目(要素幅とその左右境界)のみですブラウザがそのプロパティの値を決定できることを示すauto値に設定できます.必要に応じて、ブラウズは次のルールに従います.1.これらのプロパティがautoに設定されておらず、合計幅が親エレメントの幅より小さい場合、margin-rightプロパティはauto値に設定され、合計幅が親エレメントの幅に等しくなるように十分に大きくすることができます.
:
<style type="text/css">
#box { width: 600px; border: 1px solid #000; }
#cssmodel-1 { width: 300px border: #c00; }
</style>
<div id="box">
<div id="cssmodel-1"> margin-right auto </div>
</div> 2.適切にautoに設定されている属性がある場合、その属性は親要素の幅に等しくなるように十分に大きくなります.
:
<style type="text/css">
#box { width: 600px; border: 1px solid #000; }
#cssmodel-2 { border: #c00; width: 300px; margin-left: auto; }
</style>
<div id="box">
<div id="cssmodel-2"> margin-left auto </div>
</div>
auto， ， 。 margin-left: ,
3.width、margin-left、margin-rightの両方がautoに設定されている場合、CSS 2互換ブラウザはmargin-leftとmargin-rightを0に設定し、widthが親要素の幅に等しくなるように十分に大きく設定します.
:
<style type="text/css">
#box { width: 600px; border: 1px solid #000; }
#cssmodel-3 { border: #c00; width: auto; margin-left: auto; margin-right: auto; }
</style>
<div id="box">
<div id="cssmodel-3"> margin-left:0; margin-right:0; width: , </div>
</div>
auto， ， 。 margin-left:0; margin-right:0; width: ,
4.左右の境界がautoに設定されている場合、親要素の中で常に同じ値に設定されます.
:
<style type="text/css">
#box { width: 600px; border: 1px solid #000; }
#cssmodel-4 { border: #c00; width: 300px; margin-left: auto; margin-right: auto; }
</style>
<div id="box">
<div id="cssmodel-4"> margin-left:0; margin-right:0; width: , </div>
</div>
auto， ， 。
フローティング要素にはいくつかの特殊なルールがあります.フローティング要素(align=leftとして指定された画像など)の境界は、フローティング要素に負の境界がない限り、次の図のようにHTMLの機能がどのように実現されているかを示しています.
:
<body>
<p>
<img align="left" src="pics/img.gif" />
Some sample text...
</body>
http://www.msleft.com/review/cssmodel.html
図3
ブラウザは、可能な限り画像とその境界を段落の左上に移動しますが、段落やドキュメントの本文の左境界や上境界とは重なりません.段落や本文の左境界は、上境界が重なります.