D46_ FE101 + HW1

鋼彈吊單槓：什麼是盒模型？

• 運用 box-sizing: border-box; 控制元素的實際寬高

斯斯有三種：display 的三種形式：block、inline 與 inline-block

• block: 會佔滿一整行
• inline: span, a
• inline-block: 結合上述兩者的優點

CSS 基礎 Part4：定位（position）

• 最好理解的兩種：static 與 relative

  • static: 預設值
  • relative: 相對定位，根據原本位置做偏移
    • position: relative;
    • bottom: -20px;
    • top: 30px;

• 沒那麼難理解的 absolute 與 fixed

  • 重要的概念！

CSS 隨意聊加上切板實戰（直播影片存檔）

• box model: 4'10" - 10'08

    // 不是 first-child 就隱藏起來
    .box:not(:first-child) {
    }

• display 的三種情況：10'20" - 22'10"
• live 示範切版：22'22" - 47'45"
• QA時間： ~ 到最後
  • float, flexbox, grid 差別：
  • vertical-align 針對 inline 元素

W6 作業ㄧ

• 先大致上把所有區塊拉出來，明天開始做 CSS