iT邦幫忙

0

金魚腦 CSS網頁雜記 (持續更新)

css

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%

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

尚未有邦友留言

立即登入留言