ビジュアルフォーマットモデル
4814 ワード
定義:ビジュアルフォーマットモデル(visual formating model):CSSのメカニズムで、大量のCSS仕様からなり、複数の要素がページ内でどのようにレイアウトされるかを規定しています.
一、視覚フォーマットモデル
①要素の配置体系
-いずれかの要素は、いずれかのロケータリングシステムに属する必要があります.
-位置決めシステムには、通常フロー(normal flow)、フローティング(float)、絶対位置決め(absolute positioned)の3種類がある.
②ボックスモデルのサイズ:
-em:親要素の倍数を取ります.例:font-size:2 em;親要素font-sizeの2倍を表す.
-rem:ルート要素の倍数を取ります.
-%:親要素の幅のパーセントを表すパーセント.
-auto:自動で、一般的には要素の内容が占める幅です.
-ボックスモデルのサイズ-%:サイズがブロックサイズを含むパーセントであることを示します.
-margin、padding、widthの割合:ブロック幅を含む割合.
-ヘイト.
-ボックスモデルのauto:寸法は位置決めシステムの影響を受け、異なる位置決めシステム、autoの計算規則は異なる.
-marginの値は負の値をとることができ、2つの箱が重なる.
二、一般的な流れ:
-通常フロー、ドキュメントフロー、通常ドキュメントフローとも呼ばれます.
-ボックスモデルのauto値:ブロックレベル要素は、通常のフローロケータリングシステムで寸法が自動値になったときに寸法を計算する方法は次のとおりです.
①水平方向:-通常のフローボックスの水平方向の寸法は、ブロックを含む幅に等しくなければなりません.
-ブロックレベル要素を通常のストリームで水平に中央に配置する方法:1つはブロックレベル要素に固定幅値を与えること、2つはmarginの左と右をautoに設定することです.これにより、水平に自動的に中央に位置することができます.
-左右の外距離とwidthが固定され、ブロックを含む幅を満たすことができない場合、右外距離は強制的にautoに変更され、ブロックを含む幅を満たすことができない.
②垂直方向:-marginがautoの場合、垂直方向0 pxとなります.
-heightがautoの場合、コンテンツの幅に適応します.
-2つの外側の距離が隣接している場合は、マージ(折りたたみ):いずれも正の値の場合は、最大値をとります.いずれも負の値の場合、最小値をとります.2つの数が正と負の場合、加算します.
-外側の距離に負の値が設定されている場合は、ラベルの位置を調整できます.つまり、2つのラベルが重複している場合があります.
三、フローティング
-エレメントのfloatプロパティの値がleftまたはrightの場合、エレメントはフローティングロケーションに属します.
1. ボックスモデルのauto値:
2. 箱の位置:
-左に浮かぶ箱:上から左に並べます.
-右に浮かぶ箱:上から右に並べます.
-フロートボックスの上端は、前のボックスの上端より高くないでください.
-残りのスペースがフロートボックスを置くことができない場合は、ボックスを収容するのに十分なスペースがあるまで、ボックスを下に移動し、左または右に移動します.
3. 通常のフローがフローティングに遭遇した場合:
-フローティングボックスを配置するときは、通常のフローボックスを避けます.
-通常のフローボックスは、フローティングボックスを無視して配置されます.
-フローティングボックスがドキュメントフローから離れ、サブエレメントがフローティングされると、親エレメントが高度に陥没します.
4. フローティングのクリア(高さの陥没を解決):
-1つの要素に対して、フローティングをクリアし、その要素を配置時にフローティング要素の下に表示させることができます.
以上の方法で、親要素の高さを最下位に計算します.
5. float値-継承できません.
-none(デフォルト):フローティングをクリアしない
-left:左フローティングをクリアし、要素を左フローティングボックスの下に配置します.
-right:右フローティングをクリアし、要素は右フローティングの箱の下に配置します.
-both:左右のフローティングをクリアし、要素は左右のフローティングボックスの下に配置します.
四、絶対位置決めシステム
1. 箱の相対位置:
-箱の元の位置決めシステムの下にある位置を指します.
-ドキュメントフローから離れません.
-ボックスのpositionプロパティをralativeに設定し、相対位置を有効にします.
-positionプロパティ:継承できません.
-static(デフォルト):静的位置(元の位置).
-relative:相対位置、ボックスが元の位置に対してオフセットします.
-absolute:絶対位置.
-fixed:固定位置.
-ボックスがオフセットされても、他のボックスの位置には影響しませんが、他のコンテンツを上書きする場合があります.
-次の場合、相対位置を使用できます.
-既存の場所の占有を継続する必要がある場合.
-箱の間を重ねる必要があるとき.
2.ぜったいいち
-フローティング要素が絶対位置に設定されると、floatプロパティはnoneに強制的に設定されます.
-絶対的な位置決めは、他のテンおよび要素に影響を及ぼさず、元の位置を占めません.
-絶対位置決めはleft、top、right、bottomで設定できます.
①固定位置(position:fixed)
-固定位置は、ビューポートに対するオフセット量に応じて変化し、ドキュメントフローから離れます.
-オーバーラップを形成するときに一般的に使用されます.
-コードの位置が前後して固定位置のラベルに影響を及ぼさないため、bodyがラベルを終了する前に書くのが一般的である.
②絶対位置(position:absolute)
注:ブロックpositionプロパティを含むrelativeを推奨します.これにより、既存のページのレイアウトが破壊されません.absolute、fixedの値をとるとドキュメントフローから離れ、次の通常フローが上に移動し、既存のページレイアウトが破壊されます.
③スタックレベル(stack level)
-スタックレベルによって、エレメントが前面に表示されるか、背面に表示されるかが決まります.
-Z-indexプロパティを使用して、要素のスタックレベルを設定します.
-z-indexプロパティ:継承不可、デフォルト値はauto(0)、値は数値(負の無限から正の無限)
-注意:1つは、この属性が絶対位置と固定位置にのみ使用され、静的位置の要素には適用されません.二つ目は、z-indexをできるだけ使わないことです.
④ブロックレベルフォーマットコンテキスト(Block Formatting Context、BFCと略称)
-独立したレンダリング領域であり、この領域の通常のフローの高速化とレイアウトを規定します.
-BFCレンダリング領域:この領域にはHTML要素が作成されています.次の要素はその内部にBFC領域を作成します.
-ルート要素-フローティングおよび絶対位置要素
-overflowがvisibleに等しくないブロックボックス:すなわちoverflow:hidden(ドキュメントフローから離れない)
-レンダリング時に干渉を補完するBFC領域が異なります.つまり、外縁はマージされません.
転載先:https://www.cnblogs.com/zhangzhiyong/p/9502644.html
一、視覚フォーマットモデル
①要素の配置体系
-いずれかの要素は、いずれかのロケータリングシステムに属する必要があります.
-位置決めシステムには、通常フロー(normal flow)、フローティング(float)、絶対位置決め(absolute positioned)の3種類がある.
→position absolute fixed?→ →float left right？→
↓ ↓ ↓
↓ ↓
②ボックスモデルのサイズ:
-em:親要素の倍数を取ります.例:font-size:2 em;親要素font-sizeの2倍を表す.
-rem:ルート要素の倍数を取ります.
-%:親要素の幅のパーセントを表すパーセント.
-auto:自動で、一般的には要素の内容が占める幅です.
-ボックスモデルのサイズ-%:サイズがブロックサイズを含むパーセントであることを示します.
-margin、padding、widthの割合:ブロック幅を含む割合.
-ヘイト.
-ボックスモデルのauto:寸法は位置決めシステムの影響を受け、異なる位置決めシステム、autoの計算規則は異なる.
-marginの値は負の値をとることができ、2つの箱が重なる.
二、一般的な流れ:
-通常フロー、ドキュメントフロー、通常ドキュメントフローとも呼ばれます.
-ボックスモデルのauto値:ブロックレベル要素は、通常のフローロケータリングシステムで寸法が自動値になったときに寸法を計算する方法は次のとおりです.
①水平方向:-通常のフローボックスの水平方向の寸法は、ブロックを含む幅に等しくなければなりません.
-ブロックレベル要素を通常のストリームで水平に中央に配置する方法:1つはブロックレベル要素に固定幅値を与えること、2つはmarginの左と右をautoに設定することです.これにより、水平に自動的に中央に位置することができます.
-左右の外距離とwidthが固定され、ブロックを含む幅を満たすことができない場合、右外距離は強制的にautoに変更され、ブロックを含む幅を満たすことができない.
②垂直方向:-marginがautoの場合、垂直方向0 pxとなります.
-heightがautoの場合、コンテンツの幅に適応します.
-2つの外側の距離が隣接している場合は、マージ(折りたたみ):いずれも正の値の場合は、最大値をとります.いずれも負の値の場合、最小値をとります.2つの数が正と負の場合、加算します.
-外側の距離に負の値が設定されている場合は、ラベルの位置を調整できます.つまり、2つのラベルが重複している場合があります.
三、フローティング
-エレメントのfloatプロパティの値がleftまたはrightの場合、エレメントはフローティングロケーションに属します.
1. ボックスモデルのauto値:
| | | |
| :-------- | --------: | :------: |
| margin-left:auto | | 0px |
| margin-right:auto | | 0px |
| margin-top:auto | 0px | 0px |
| margin-bottom:auto | 0px | 0px |
| width:auto | | |
| height:auto | | |
2. 箱の位置:
-左に浮かぶ箱:上から左に並べます.
-右に浮かぶ箱:上から右に並べます.
-フロートボックスの上端は、前のボックスの上端より高くないでください.
-残りのスペースがフロートボックスを置くことができない場合は、ボックスを収容するのに十分なスペースがあるまで、ボックスを下に移動し、左または右に移動します.
3. 通常のフローがフローティングに遭遇した場合:
-フローティングボックスを配置するときは、通常のフローボックスを避けます.
-通常のフローボックスは、フローティングボックスを無視して配置されます.
-フローティングボックスがドキュメントフローから離れ、サブエレメントがフローティングされると、親エレメントが高度に陥没します.
4. フローティングのクリア(高さの陥没を解決):
-1つの要素に対して、フローティングをクリアし、その要素を配置時にフローティング要素の下に表示させることができます.
header:after{ header
content:"";
display:block;
clear:both;}
以上の方法で、親要素の高さを最下位に計算します.
5. float値-継承できません.
-none(デフォルト):フローティングをクリアしない
-left:左フローティングをクリアし、要素を左フローティングボックスの下に配置します.
-right:右フローティングをクリアし、要素は右フローティングの箱の下に配置します.
-both:左右のフローティングをクリアし、要素は左右のフローティングボックスの下に配置します.
四、絶対位置決めシステム
1. 箱の相対位置:
-箱の元の位置決めシステムの下にある位置を指します.
-ドキュメントフローから離れません.
-ボックスのpositionプロパティをralativeに設定し、相対位置を有効にします.
-positionプロパティ:継承できません.
-static(デフォルト):静的位置(元の位置).
-relative:相対位置、ボックスが元の位置に対してオフセットします.
-absolute:絶対位置.
-fixed:固定位置.
-ボックスがオフセットされても、他のボックスの位置には影響しませんが、他のコンテンツを上書きする場合があります.
-次の場合、相対位置を使用できます.
-既存の場所の占有を継続する必要がある場合.
-箱の間を重ねる必要があるとき.
2.ぜったいいち
-フローティング要素が絶対位置に設定されると、floatプロパティはnoneに強制的に設定されます.
-絶対的な位置決めは、他のテンおよび要素に影響を及ぼさず、元の位置を占めません.
-絶対位置決めはleft、top、right、bottomで設定できます.
①固定位置(position:fixed)
-固定位置は、ビューポートに対するオフセット量に応じて変化し、ドキュメントフローから離れます.
-オーバーラップを形成するときに一般的に使用されます.
-コードの位置が前後して固定位置のラベルに影響を及ぼさないため、bodyがラベルを終了する前に書くのが一般的である.
②絶対位置(position:absolute)
：
position:absolute
↓
position≠static → → （ ）
（ ）
↓
↓
注:ブロックpositionプロパティを含むrelativeを推奨します.これにより、既存のページのレイアウトが破壊されません.absolute、fixedの値をとるとドキュメントフローから離れ、次の通常フローが上に移動し、既存のページレイアウトが破壊されます.
③スタックレベル(stack level)
-スタックレベルによって、エレメントが前面に表示されるか、背面に表示されるかが決まります.
-Z-indexプロパティを使用して、要素のスタックレベルを設定します.
-z-indexプロパティ:継承不可、デフォルト値はauto(0)、値は数値(負の無限から正の無限)
-注意:1つは、この属性が絶対位置と固定位置にのみ使用され、静的位置の要素には適用されません.二つ目は、z-indexをできるだけ使わないことです.
④ブロックレベルフォーマットコンテキスト(Block Formatting Context、BFCと略称)
-独立したレンダリング領域であり、この領域の通常のフローの高速化とレイアウトを規定します.
-BFCレンダリング領域:この領域にはHTML要素が作成されています.次の要素はその内部にBFC領域を作成します.
-ルート要素-フローティングおよび絶対位置要素
-overflowがvisibleに等しくないブロックボックス:すなわちoverflow:hidden(ドキュメントフローから離れない)
-レンダリング時に干渉を補完するBFC領域が異なります.つまり、外縁はマージされません.
転載先:https://www.cnblogs.com/zhangzhiyong/p/9502644.html