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

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

第一階段 基本區塊編排法

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的新佈局模型,
具有強大的功能來控制框及其內容的大小和位置。
與以單軸為導向的“ 靈活框式佈局”不同,
「網格佈局」針對二維佈局進行了優化,
二維佈局需要在內容上對齊。
補充說明

 

 

設計是為了給大眾查看的,設計者應該隨時要了解 [瀏覽器] 使用趨勢,桌機版含掌上設備版

設計版面時,應該要了解使用者的 [螢幕設備解析度],桌機螢幕使用趨勢掌上設備螢幕使用趨勢

第一階段~第三階段的範例練習參考
第四階段的 Flex Box 的介紹
第五階段的 Grid 網格佈局 的介紹, 建議晚點學習, 讓第一~四階段先熟悉一點, 再學習第五階段, 才不至於混淆。

go TOP