我常用的 10 個 CSS 一行程式碼技巧

王大冶發表於2024-12-03
CSS行程
  • CSS技巧與案例詳解
  • vue2與vue3技巧合集
  • VueUse原始碼解讀

image.png

在 CSS 開發中，一些簡單的一行程式碼往往可以讓你的頁面變得更加優雅高效。以下是 10 個我喜歡使用的 CSS 一行程式碼，它們不僅簡潔，還能在實際專案中起到很大的作用。

1. 設定寬高比例（Aspect Ratio）

透過 aspect-ratio 屬性，可以根據指定的寬度自動調整高度（反之亦然）。

.box {
  width: 90%;
  aspect-ratio: 16/9;
}

適合用在影片播放器或圖片容器中，確保它們以正確的比例呈現。

2. 邏輯屬性（Logical Properties）

使用 margin-block 和 margin-inline 替代傳統的 margin-top、margin-right 等，更加簡潔直觀。

.box {
  margin-block: 5px 10px;    /* 上邊距 5px，下邊距 10px */
  margin-inline: 20px 30px;  /* 左邊距 20px，右邊距 30px */
}

對於 padding 也是一樣的：

.box {
  padding-block: 10px 20px;  /* 上下內邊距 */
  padding-inline: 15px 25px; /* 左右內邊距 */
}

這些屬性會自動適配文字方向（如從左到右或從右到左）。

3. 全域性盒模型設定

避免因預設 box-sizing 屬性引起的佈局問題，透過以下一行程式碼可以讓所有元素包含其內邊距和邊框：

*, *::before, *::after {
    box-sizing: border-box;
}

這可以大幅減少佈局錯誤，讓開發更加省心。

4. 平滑滾動（Smooth Scroll）

為整頁啟用平滑滾動，提升使用者體驗：

html {
    scroll-behavior: smooth;
}

在單頁網站或錨點導航中尤為實用。

5. 垂直書寫模式（Vertical Writing Mode）

讓文字從右向左垂直排列，可用於特殊設計場景或支援垂直書寫的語言：

.vertical-text {
    writing-mode: vertical-rl;
}

6. 文字溢位省略號（Truncating Text with Ellipsis）

對於超出容器的長文字，可以用省略號代替多餘部分：

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

適合用在標題、卡片或連結預覽中。

7. 居中對齊（Place-items）

使用 place-items 快速實現網格容器的水平和垂直居中對齊：

.box {
  display: grid;
  place-items: center;
}

8. 限制文字寬度（Limit Text Width）

透過限制每行文字的最大字元數，提升可讀性：

p {
  max-width: 100ch;
}

“ch” 單位表示一個字元的寬度，非常適合用於段落樣式。

9. 佔位符樣式（Styling Placeholder Text）

給輸入框的佔位符文字新增樣式：

::placeholder {
    color: #999;
    font-style: italic;
}

10. 統一的強調色（Accent Color）

透過 accent-color 為互動元素（如按鈕、核取方塊）設定統一的主題顏色：

body {
  accent-color: green;
}

可以在整個網站中保持一致的視覺風格，而無需單獨為每個元素定義樣式。

總結

這些 CSS 一行程式碼涵蓋了佈局最佳化、使用者體驗提升和樣式統一等多個方面，既實用又高效。將它們融入你的日常工作流，可以讓專案的開發更加輕鬆，同時大幅提升程式碼的質量和可維護性。

試試這些技巧，感受它們帶來的改變吧！

首發於公眾號 大遷世界，歡迎關注。📝 每週一篇實用的前端文章 🛠️ 分享值得關注的開發工具 ❓ 有疑問？我來回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章