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

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

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

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

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

【主動式需求】：

• 固定定位 position: fixed; 浮動出來, 固定在畫面中, 不被視窗捲動而移走。 top、bottom、left、right的定位是相對到視窗邊緣的距離, 如果是負值就會超出視窗。
• 絕對定位 position: absolute; 浮動出來, 不影響不推動同一層前後物件的位置, top、bottom、left、right的定位是相對到有定位能力的父層元素邊緣的距離(如果父層沒有位能力, 則依續往外層找到有定位能力的祖先層)。

【被動式需求】：

• 相對定位 position: relative; 不完全浮動出來, 會推動同一層前後物件的位置, 還沒有設定上下左右定位時, 呈現的位置不會改變, top、bottom、left、right的定位是相對於自己, 對於方向感容易混淆者建議這裡就不要設定上下左右了。
• 靜態定位 position: static; 這是網頁元素 position 的預設，是沒有定位能力的，不能使用 left、right、top、bottom、z-index屬性。

【另外還有一個特殊需求】：

• 粘性定位 position: sticky; 一開始沒有固定位置，會隨著畫面移動，移到指定位置時則改為固定定位，但，瀏覽器的支援度並不高，暫時不建議使用。

• 設定為 fixed、 absolute 定位的物件 (類似完全浮出的效果) 寬度為 auto 沒有設定，由內容撐開，或是由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 來決定。
• 子元素受制於父元素，寬度依設定結果不一樣。
• 完整詳細的介紹請前往講義 1-7

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

• 這不是一個預設的顯示特性，而是必須設定才有的框架。
• 這是一個基於二維網格智能性的佈局系統。
• 具有強大的功能來控制框及其內容的大小和位置。
• 由父層框架來管理子層物件。
• 這是一個突破性特殊的排版方式。

進一步詳細的介紹請前往講義 1-8

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