iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

程式導師實驗計畫第五期 回顧筆記系列 第 13

D12 第六週 切版地獄的生存指南

今天時間不太夠,純粹整理 @minw 助教分享的切版教學裡面我自己覺得最最重要的部分,其他可能還需要再花時間回來補了。

判斷要使用什麼 position 定位

  • 順著排版流 => static
  • 順著排版流,但是離開本身位置一些些 => relative
  • 跳脫排版流 (放飛自我)
    • 以母元素做定位 => absolute
    • 以視窗做定位 => fixed

排版流

要先知道 block, inline 這兩種層級元素的差別。

block 層級的元素會把一列空間占滿,這一列只能有它一個人存在。典型代表是 div
inline 層級的元素則是會按行排列,直到這列放不下才會換列。典型代表是 span
inline-block 層級的元素比較特別,對外具有 inline 可以在同一列存在的特性,但對內具有 block 屬性。

自己習慣觀察如何切版的方式

  1. 首先是從上到下,把頁面上可以切成成一列的區塊都切出來。用 div 包起來
  2. 剩下來就是在一列一列的 div 裡面再切出一段一段的內容。可以用 inline-block 或是 inline 的元素包。如果希望元素有寬高,可以設定大小的話,就用 inline-block。
  3. 切完大概就有形了,剩下就是調整 margin, padding
  4. 最後可能再加上裝飾,像圓角邊框、陰影、文字效果、文字大小、字型、顏色之類的細節在這時候補上

Flex, Grid

這兩個算是蠻新的排版方式,大致延續排版流的精神,但是增加更多彈性。用的好的話可以少掉很多煩惱,但還是可以先熟悉原本的排版方式,掌握基礎之後更能夠發揮它的威力。


先降,後續再補


上一篇
D11 第六週 (回憶篇)
下一篇
D13 第七週 (回憶篇)
系列文
程式導師實驗計畫第五期 回顧筆記31

尚未有邦友留言

立即登入留言