- 區塊方框元素預設
寬度100% 高度0
- 就算寬度變小
也仍佔躆段落寬度
- 預設區塊方框
由上而下排列
仿如貼在牆壁上
- 可運用padding、margin推動距離
- position預設為 static
沒有定位的能力
|
- 區塊如果要左右規律地分欄則 設定浮動
浮動靠左 float:left;
浮動靠右 float:right;
- 父管子的方法：如果一個區塊內的子元素皆浮動, 或是最後的子元素浮動, 那麼子元素就像是膠帶浮貼的效果, 無法撐開父元素。如果要讓父元素區塊包含住所有的子元素, 那麼父元素可以設定 overflow:hidden; 但不能設定成固定高度。
- 弟清兄的方法：如果在同一層區塊中前面元素設定浮動, 而後面的元素如果不要浮動, 那麼後面元素可能就會壓在下方, 而文字可能就會亂亂跑了(有縫就鑽), 後面元素如果不要浮動了, 那麼就要結束清除前面的浮動,
則可以設定 clear:both;
或是 clear:left;
或是 clear:right;
|
- 如果同一階層的區塊之間, 大小不統一, 位置不對齊, 甚至需要彼此重疊設計, 尤其需要精準對位或靠下對齊時, 則設定 position (定位)
為 absolute (絕對定位) 會比較理想。
- 當子元素需要設定為絕對定位時, 那麼父元素就必須擁有定位的能力,
position 必須設定為 relative
或 absolute
或 fixed。
- 三個有定位能力的position：
position:fixed;
浮動出來, 固定在畫面中, 不被視窗捲動而移走。
position:absolute;
浮動出來, 不影響不推動同一層前後的區塊位置, 定位座標相對到父層元素邊緣的距離。
position:relative;
不會浮動出來, 會推動同一層前後的區塊位置, 定位座標相對到父層元素邊緣的距離。
|