SCSS 倍數間格

@function line($count: 1){
  @return $baseLineHeight * count
}
.test {
  padding: line(2);
}

ul > li 間格問題

• 1:17:50 講解
• 使用 inline-block 中間會有 "一字元" 的空格

  ul {
    list-style: none;
    font-size: none;
    li {
      display: inline-block;
      font-size: 16px;
    }
  }

width: auto VS 100%

• What Does “width: 100%” Do in CSS?

width: auto (較推薦使用)

• 塊級元素 Default 設定
• 內容寬 = margin + border + padding + width

width: 100%

• 內容寬 等同於 父級 width (父必須有設定 width)
• 與 auto 相比 內容寬 不含 margin
• 在沒有設置 box-sizing: border-box 不論給與 margin / padding 都會破版
• 在設置 box-sizing: border-box 給與 margin 會破版

範例 CodePen 連結

rgba() VS opacity

• opacity 作用於元素，代表其子元素也會被淡化
• rgba() 只能用於顏色、背景色 (子元素不影響)

inline-flex

表該容器為 Inline，對於子元素無影響

nth-child, nth-of-type

first-child / last-child / first-of-type / last-of-type

• nth- 皆可傳入 odd / even / 2n+3
• nth-child(n) 選擇父標籤下的 第n個 "子元素"
• nth-of-type(n) 選擇父標籤下的 第n個 "某元素"

塊級 (Block)

1. 寬繼承於容器 (預設 width: auto)
2. 縱向堆疊 (自動換行)
3. 能設定寬高、margin、padding

行內 (Inline)

1. 自動包裹內容
2. 排成一行 (不自動換行)
3. 設置 寬高 & margin 上下 無效!!
4. 利用設置 line-height 拉開兩行相疊的行內元素

Ex: .div > p + .div > p

  span {
    // 無效區
    height: 150px;
    width: 150px;
    margin-top: 10px;
    margin-bottom: 10px;

    // 有效區
    margin-left: 20px;
    margin-right: 20px;
    padding: 10px;
    line-height: 50px;
  }

line-height

• line-height 代表 兩行文字中間的高度。
• 文字共有4條線 頂線 -> 中線 -> 基線 -> 底線
• line-height 代表 基線至基線的距離
• 深入 CSS 之 line-height 應用

vertical-align 垂直對齊

• 用於 文字/圖片/icon 垂直對齊文字
• default 為 baseline
• middle 置中 (最常用)
• text-bottom 文字最高

  <div class="testBlock">
    <span>Text</span>
    <img class="vertical-align-middle" src="https://fakeimg.pl/40x40/">
    <span>Text</span>
  </div>

display

• block: 撐滿容器 (利用 margin: 0 auto 水平置中)
• inline: 自動包裹內容，表現如行內 (實用)
• inline-block: 自動包裹內容，表現如塊級 (實用)

user-select 禁用選取

• 支援度蠻高的，但 "必須" 加上瀏覽器 prefix
• none 禁止用戶選取 文本 & "子元素"
• text 雙擊可選單詞 / 三擊可全選文本
• all 單擊 / 右鍵子元素 全選該區塊
• W3School DEMO

float 浮動

• 用於文繞圖
• 若子皆float，會造成該母元素 height 0 (形成破版)
• clearfix 清除浮動

  // 掛載 parent 上
  .parent {
    &:after {
      content: "";
      display: block;
      clear: both;
    }
  }

column 多欄文字

• 多欄文字排版器
• columns: 100px 3 (欄寬度、欄數)
• column-width 欄寬度 (配合 media 設置最小寬度)
• column-count 多少欄數
• column-gap 欄間隔
• column-rule 分割線樣式縮寫

column-rule: 4px double #fff

• column-span:all 使該元素橫跨所有欄

不可見元素與點擊事件

• display: none 不可被點擊
• visibility: hidden 不可被點擊
• z-index: -100 不可被點擊
• opacity: 0 可被點擊
• 穿透效果 pointer-events

position fix Y軸置中

• 寫 ModalBox 一直沒想到這招紀錄一波

  .modal {
    z-index: 30;
    position: fixed;
    top: 20vh;
    
    // 重點在此
    left: 50%;
    transform: translateX(-50%);
  }

border 0 / none

• border: none (用此吧!)
  表示沒有，瀏覽器解析"none"時將不作出渲染動作，即不會消耗內存值。
• border: 0
  設為"0"像素雖然在頁面上看不見，但按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經占用了內存值。

參考資料

• MDN
• W3School