WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

3-6. 網頁排版思維總整理 進一步多了解！有空可以多看看！進階課程會仔細說明！

第一階段 基本區塊編排法

block
區塊預設由上而下排版
屬於 block 區塊框架的元素預設由上而下排版。
特性 and 分類
※這是段落式區塊的預設特性！
寬度預設100%，
就算寬度變小，也仍然佔躆段落整個寬度，
左右多出來的部份為 margin。
寬高 and 邊界距離
  • 預設：寬度width: 100%、 高度height: 0。
  • 可運用 padding、margin 推動距離。
  • padding：框架內部的留白邊界。
  • margin：與前後物件的距離。
補充說明
position 預設為 static，表示沒有定位的能力，
不能使用 left、right、top、bottom、z-index屬性。

第二階段 左右分欄浮動法

float
左右分欄 Float 浮動排版
當區塊需要左右分欄排版時，
傳統的設計就是 float 浮動。
特性 and 分類
※需要左右排列、或特別需要移到最右側時
  • 浮動的分類：
    浮動靠左 float:left;   浮動靠右 float:right;
  • 浮動會有後遺症！
    下方物件就算不浮動了，也會往上找空間浮。
  • 解決方法一：父管子
    如果子元素皆為浮動設計，或者是最後一個子元素是浮動設計，那麼由父元素設定 overflow:hidden; ，但前提是父元素不能設定固定高度 height。
  • 解決方法二：弟管兄
    當同一層前面物件(兄)是浮動設計，而後面物件(弟)不浮動了，那麼由後面物件(弟)設定 clear:both;，或是 clear:left; 或是 clear:right;。
寬高 and 邊界距離
  • 設定浮動之後的物件 (類似浮貼效果) 寬度為 0，
    由內容撐開，或是由CSS指定設計。
  • 可運用 padding、margin 推動距離。
  • padding：框架內部的留白邊界。
  • margin：與前後物件的距離。
補充說明
position 仍然是 static，表示沒有定位的能力，
不能使用 left、right、top、bottom、z-index屬性。

第三階段 特別定位編排法

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

【主動式需求】：

  • 固定定位 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; 一開始沒有固定位置，會隨著畫面移動，移到指定位置時則改為固定定位，但，瀏覽器的支援度並不高，暫時不建議使用。
寬高 and 邊界距離
  • 設定為 fixed、 absolute 定位的物件 (類似完全浮出的效果) 寬度為 0，由內容撐開，或是由CSS指定設計。
  • 可運用 padding、margin 來設定內外保留的邊界距離。
  • 但主要是以 left、right、top、bottom、z-index 來定位。
補充說明

第四階段 彈性框架編排法

flex
Flex Box 彈性框架的排版
  • 這不是一個預設的顯示特性，而是必須設定才有的框架。
  • Flex Box 是一個彈性、豐富且強大的排版功能。
  • 由父層框架來管理子層物件。
  • 父層物件擁有控制子元素：方向的管理、水平各種對齊、垂直各種對齊…等排版。
  • 當以上傳統排版無法達成目標時，可以考慮這種排版。
特性 and 分類
※特性：「等高」、特殊「反向」排版。
  • 父層元素設定 display: flex;
  • 父層管理子元素的方向 flex-direction: ... 。
  • 父管子的水平對齊 justify-content: ... 。
  • 父管子的內容垂直對齊 align-items: ... 。
  • 父管子的框架垂直對齊 align-content: ... 。
  • 眾多功能另起頁面介紹 [link]。
寬高 and 邊界距離
  • 父層物件的寬度依元素本身的顯示模式 display 來決定。
  • 子元素受制於父元素，寬度依設定結果不一樣。
補充說明

第五階段 網格佈局編排法

grid
Grid 網格佈局排版
  • 這不是一個預設的顯示特性，而是必須設定才有的框架。
  • 這是一個基於二維網格智能性的佈局系統。
  • 具有強大的功能來控制框及其內容的大小和位置。
  • 由父層框架來管理子層物件。
  • 這是一個突破性特殊的排版方式。
特性 and 分類
網格佈局的功能提供了一種機制，可以使用預測的大小調整行為，將佈局的可用空間劃分為列和行。
寬高 and 邊界距離
網格佈局是CSS的新佈局模型，
具有強大的功能來控制框及其內容的大小和位置。
與以單軸為導向的“ 靈活框式佈局”不同，
「網格佈局」針對二維佈局進行了優化，
二維佈局需要在內容上對齊。
補充說明

 

 

go TOP