今天時間不太夠，純粹整理 @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

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

先降，後續再補