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

这两个算是蛮新的排版方式，大致延续排版流的精神，但是增加更多弹性。用的好的话可以少掉很多烦恼，但还是可以先熟悉原本的排版方式，掌握基础之後更能够发挥它的威力。

先降，後续再补