通常フロー/normal-flow(ドキュメントフロー/document-flow)
W 3 C仕様にはドキュメントフロー/document-flowという概念はなく、通常フロー/normal-flowのみであり、ドキュメントフローの呼び方は主に多くの中国語翻訳者の翻訳方式の問題である. 普通流とは何ですか?すなわち、要素(ブロック/block要素、インライン要素)がHTMLにおける位置順(上から下、左から右)に配列するプロセスである.
一般流元素の位置を調整する4つの方法 margin:要素と要素の間隔を隔てて、ブロックレベル要素間の距離を制御する.
padding:要素と内容の間隔を隔てる、ブロックレベル要素内部を制御する.
float(「フローティング/FLoat」章参照) position測位方式レイアウト(具体的には「測位/Position」章を参照) ボックスモデル/Box-model
ボックスモデルは主に4つの領域を定義しますコンテンツ(content)内マージンボーダー外付け距離 注意 background-color/background-imageはpadding+content領域で定義されたです.
箱幅=border(right+left)+padding(right+left)+width 箱高さ=boder(top+bottom)+padding(top+bottom)+height paddingは箱を広げ、箱の幅を計算する際、padding に注意する必要がある.
フローティング/FLoat+ポジショニング/Position
フローティング/FLoat
レイアウト
は、ブロックレベル要素を1行に配置することができ、ボックスの左側または右側にのみ配置し、float属性を設定します.注意:floatはブロックレベル/block要素を行内ブロック/inline-block要素に変換します.フローティングされたコンテンツは、コンテンツ領域(paddingおよびborder内)にあります. は、要素をテキストで囲み、要素がファイルから間隔を置くようにする場合は、要素marginを設定します. はドキュメントストリームから完全に離れず、インライン要素(img,a,input,純文字...)についてコンテンツはドキュメントストリームから離れず、完全にドキュメントストリームから離れると、文字「no float」および画像は青い箱とともに左上隅に配置されますが、ピンク色の領域の外に配置され、コンテンツがドキュメントストリームを占めていることを示します. フローティングのクリア
なぜフローティングをクリアしますか?フローティングは親要素を高度に陥没させ、レイアウトに影響を与える場合はフローティングをクリアする必要があります. フローティングをクリアする方法CSSでclear属性はフローティング { clear: ;}
/*
left：
right：
both：
*/
をクリアするために使用される追加加算:最後のフローティング要素の後に空のブロックレベル要素(div/br...)を追加します.「clear:both」プロパティを追加します.欠点:余分なノードを追加します.使用はお勧めしません! 親要素overflow:親要素にoverflowプロパティ ul {
overflow: hidden;
*zoom: 1; /* IE7 ， hasLayout */
}
を追加する欠点:コンテンツが多くなると、オーバーフローする要素を表示できません.使用はお勧めしません!overflowを追加した後の効果::after擬似クラス:親要素の末尾に空のブロックレベル要素があります.推奨します. .clearfix:after {
content: ""; /* content:"."， */
display: block; /* after ， ， */
height: 0; /* */
clear: both;
visibility: hidden; /* ， dom */
}
.clearfix {
*zoom: 1; /* IE7 ， hasLayout */
}
:before+:after二重擬似クラス:コードがより簡潔で、使用を推奨します! .clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1; /* IE7 ， hasLayout */
}
位置決め/position
static:デフォルトの位置決め方法 relative:文書フローから相対的に位置する.
absolute:絶対位置決め、ドキュメントフローから離脱
fixed:固定位置決め、ドキュメントフローから離脱