加強網頁編排的整理

(預設)由上而下 規律的左右分欄 大小不統一
位置不對齊
甚至可重疊
需要精準對位
尤其靠下對齊時
  • 區塊方框元素預設
    寬度100% 高度0
  • 就算寬度變小
    也仍佔躆段落寬度
  • 預設區塊方框
    由上而下排列
    仿如貼在牆壁上
  • position預設為static, 沒有定位的能力
  • 區塊如果要左右規律地分欄則設定浮動
    浮動靠左float:left;
    浮動靠右float:right;
  • 如果一個區塊內的子元素皆浮動, 則沒有設定高度的父元素區塊就沒了高度, 如果要讓父元素區塊包含住所有的子元素, 則父元素可以設定 overflow:hidden;
  • 在同一層區塊中上方元素設定浮動, 下方元素如果要結束清除前面的浮動, 則可以設定 clear:both;
    或是 clear:left;
    或是 clear:right;
  • 如果同一階層的區塊之間, 大小不統一, 位置不對齊, 甚至需要彼此重疊設計, 尤其需要精準對位或靠下對齊時, 則設定 position (定位) 為 absolute (絕對定位) 會比較理想。
  • 當子元素需要設定為絕對定位時, 那麼父元素就必須擁有定位的能力, position 必須設定為 relativeabsolutefixed
  • 三個有定位能力的position:
    position:fixed;
    固定在畫面中不被視窗捲動而移走
    position:absolute;
    浮動出來不影響不推動同層區塊的位置, 座標相對到父層元素
    position:relative;
    定位座標相對於父層元素, 並且仍然會推動同層區塊的位置
範例練習
《 範例練習結果參考 》
※※※後述:
當區塊設定浮動時,float:leftfloat:right
或者設計定位時,position:absoluteposition:fixed
區塊皆會往前浮出,這時寬高預設皆為0,
由內容決定了寬高,或是CSS特意設定。