1-9. 網頁排版流程思維總整理

• 預設：寬度width: 100%、 高度height: 0。
• 可運用 padding、margin 推動距離。
• padding：框架內部的留白邊界。
• margin：與前後物件的距離。

• 浮動的分類：
  浮動靠左 float:left;   浮動靠右 float:right;
• 浮動會有後遺症！
  下方物件就算不浮動了，也會往上找空間浮。
• 解決方法一：父管子
  如果子元素皆為浮動設計，或者是最後一個子元素是浮動設計，那麼由父元素設定 overflow:hidden; ，但前提是父元素不能設定固定高度 height。
• 解決方法二：弟管兄
  當同一層前面物件(兄)是浮動設計，而後面物件(弟)不浮動了，那麼由後面物件(弟)設定 clear:both;，或是 clear:left; 或是 clear:right;。

• 設定浮動之後的物件 (類似浮貼效果) 寬度為 0，
  由內容撐開，或是由CSS指定設計。
• 可運用 padding、margin 推動距離。
• padding：框架內部的留白邊界。
• margin：目前框架外部的留白邊界。

• 當物件需要固定在視窗中，希望不因捲動畫面而被移動，設定為 固定定位 fixed。
• 當物件要相對父層且精準對位時，並且同層物件 (兄弟之間) 的位置互相不影響不推動，設定為 絕對定位 absolute。
• 當物件要相對父層時，父層也需有 定位能力 ，至於是哪一種定位，則依父層本身的需求判斷，可能是 fixed，可能是 absolute，也可能是 relative。

定位的分類：

• 固定定位 position: fixed; 浮動出來, 固定在畫面中, 不被視窗捲動而移走。
• 絕對定位 position: absolute; 浮動出來, 不影響不推動同一層前後物件的位置, 定位座標相對到父層元素邊緣的距離。
• 相對定位 position: relative; 不完全浮動出來, 會推動同一層前後物件的位置, 定位座標相對到父層元素邊緣的距離。

另外還有：

• 靜態定位 position: static; 這是網頁元素 position 的預設，是沒有定位能力的，不能使用 left、right、top、bottom、z-index屬性。
• 粘性定位 position: sticky; 一開始沒有固定位置，會隨著畫面移動，移到指定位置時則改為固定定位，但，瀏覽器的支援度並不高，暫時不建議使用。

• 設定為 fixed、 absolute 定位的物件 (類似完全浮出的效果) 寬度為 0，由內容撐開，或是由CSS指定設計。
• 可運用 padding、margin 來設定內外保留的邊界距離。
• 但主要是以 left、right、top、bottom、z-index 來定位。

• 要設定 left、right、top、bottom、z-index 時，必須讓物件擁有定位能力，也就是必須設定 position 為 fixed 或 absolute 或 relative。
• w3schools 介紹 position 定位
• RUNOOB 介紹 position 定位
• 其中 position: sticky 粘性定位 功能很不錯，
  參考 [w3schools] 或 [runoob]，
  但瀏覽器的支援度並不高, 參看 [Can I Use]。

• 顧名思義 Flex Box 是一個彈性、豐富且強大的排版功能。
• 由父層框架來管理子層物件。
• 父層物件擁有控制子元素：方向的管理、水平各種對齊、垂直各種對齊…等排版。
• 當以上傳統排版無法達成目標時，可以考慮這種排版。

• 父層元素設定 display: flex;
• 父層管理子元素的方向 flex-direction: ... 。
• 父管子的水平對齊 justify-content: ... 。
• 父管子的內容垂直對齊 align-items: ... 。
• 父管子的框架垂直對齊 align-content: ... 。
• 眾多功能另起頁面介紹 [link]。

• 父層物件的寬度依元素本身的顯示模式 display 來決定。
• 子元素受制於父元素，寬度依設定結果不一樣。

• W3C 介紹 Flex Box 彈性框排版
• w3schools 介紹 Flex Box 彈性框排版
• RUNOOB 介紹 Flex Box 彈性框排版
• 但 Flex Box 是新功能. 瀏覽器的支援度並不高, 參看 Can I Use： [display: flex]、 [flex-direction]、 [justify-content]。

• W3C 介紹 grid 網格佈局排版
• w3schools 介紹 grid 網格佈局排版
• 但 Grid 是新功能. 瀏覽器的支援度並不高, 參看 Can I Use： [display: grid]、 [grid-area] 。