レイアウトの3つのメカニズム

≪一般フロー｜Normal Flow｜oem_src≫:1行の排他的な1行に複数のフローティングが共存します:一般フローは複数のブロック・レベルの1行の表示位置を浮き上がらせます

フローティング

ページ効果レイアウト、複数のボックスの1行にfloat:left right noneの特徴が表示されます:標準ストリームから離れて行内のブロックに隙間がなく、親の幅が足りず、ボックスが1行落ちます.

一般的なレイアウト

左右レイアウト:左フローティング右フローティング左中右レイアウト:左フローティング左フローティング右フローティング実際のナビゲーションnav:ulネストli,liネストa li左フローティング,a回転ブロックレベル

フローティングをクリアして親ボックスの高さを設定できない場合があります

＜1＞最後のフロート要素に

<div style=“clear:both;”>div>

＜2＞親加overflow:hidden;＜3＞after擬似要素ラベルにclass=“clearfix”を付ける

.clearfix:after {
     
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
 	clear: both;
}
.clearfix {
     
    *zoom: 1;  /*ie6,7          */
}

＜4＞ダブルダミー要素ラベルにclass=“clearfix”を付ける

.clearfix:before ,.clearfix:after {
     
	content: "";
	display: table;
 }
.clearfix:after {
     
     clear:both;
}
.clearfix {
     
    *zoom: 1;  /*ie6,7          */
}

overflowの簡単な理解

overflow:hidden; オーバーフロー非表示overflow:auto;オーバーフロースクロール

CSS 5日目

css属性書き順

レイアウト配置——自己属性——テキスト属性——その他属性(CSS 3)

ベースライン整列vertical-align

行内要素、行内ブロック、テキスト
中心ベースラインの位置合わせ:vertical-align:middle;ベースラインの位置合わせ:vertical-align:bottom;トップライン整列:vertical-align:top;