每個 UI 開發人員都應該知道的 CSS 程式碼片段-css教學-PHP中文網

CSS Code Snippets Every UI Developer Should Know

簡介：使用這些方便的 CSS 技巧來增強您的樣式表

嘿，UI 開發人員朋友們！您準備好為您的樣式表添加一些活力了嗎？我們都知道 CSS 既可以是祝福，也可以是詛咒。它非常強大，但有時感覺就像我們在與一隻頑固的章魚搏鬥，試圖讓我們的佈局恰到好處。這就是為什麼我整理了這 10 個小而強大的 CSS 程式碼片段的集合，它們將使您的生活更輕鬆，讓您的設計閃閃發光。

這些不僅僅是一些舊片段 - 它們是那種會讓你拍著額頭說：「我為什麼沒有想到這一點？」的技巧。無論您是 CSS 新手還是經驗豐富的專業人士，我保證您都會在這裡找到有用的東西。所以，拿起你最喜歡的飲料，啟動你的程式碼編輯器，讓我們深入了解一些 CSS 魔法！

1.神奇的居中技巧

我們都經歷過這樣的情況 - 嘗試將 div 垂直和水平居中，但最終得到了混亂的浮動和邊距。好吧，告別那些令人沮喪的日子，因為這個小片段即將成為你新的最好的朋友：

.center-me {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

登入後複製

此程式碼使用 CSS 轉換的強大功能將元素完美地居中於其父容器中。其工作原理如下：

我們將元素的位置設為絕對位置，這將其脫離正常的文件流。
我們將其從容器的頂部和左側移動 50%。
transform 屬性然後將元素向後移動其自身寬度和高度的一半。

結果呢？每次內容都完美居中。不再需要擺弄邊距或因不合作的佈局而煩惱！

2. 平滑滾動以取勝

想要為您的頁面導航添加一絲優雅嗎？此程式碼片段只需幾行程式碼即可為您提供黃油般平滑的滾動效果：

html {
  scroll-behavior: smooth;
}

登入後複製

就是這樣！這個簡單的聲明告訴瀏覽器在滾動到頁面上的錨連結時使用平滑的動畫。這是一個小小的改變，但可以使您的網站感覺更加精緻和專業。

專業提示：

如果您想變得更奇特，您甚至可以使用一點 JavaScript 自訂滾動速度：

document.documentElement.style.scrollBehavior = 'smooth';

登入後複製

3. Clearfix Hack：馴服浮動元素

花車可能是棘手的野獸。他們有一個令人討厭的習慣，就是打破容器並對你的佈局造成嚴重破壞。輸入clearfix hack：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

登入後複製

將此類添加到任何具有浮動子級的容器中，並觀察佈局中的順序恢復情況。 ::after 偽元素在容器內容之後創建一個不可見的框，這會清除浮動並保持一切整潔。

4. 自訂捲軸：因為預設捲軸很無聊

誰說滾動條一定是醜的？使用此 CSS 片段，您可以設定捲軸的樣式以符合您網站的設計：

.center-me {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

登入後複製

此程式碼為您提供了一個時尚的自訂捲軸，可在基於 WebKit 的瀏覽器（如 Chrome 和 Safari）中運作。您可以調整顏色和尺寸以完美適合您的設計。

記住：雖然此程式碼片段非常適合 WebKit 瀏覽器，但其他瀏覽器可能不支援這些偽元素。始終在不同的瀏覽器上進行測試，以確保所有使用者獲得一致的體驗。

5.Flexbox居中快捷鍵

Flexbox 徹底改變了我們處理 CSS 版面的方式。這是使用 Flexbox 垂直和水平居中內容的快速但骯髒的方法：

html {
  scroll-behavior: smooth;
}

登入後複製

將該類別應用到容器中，它的所有子元素將完美居中。它簡單、功能強大，並且適用於所有現代瀏覽器。有什麼理由不愛呢？

6. 用省略號截斷文本

有時您需要在有限的空間中顯示文本，但又不希望它換行或溢出。此程式碼片段將截斷您的文字並在末尾添加省略號 (...)：

document.documentElement.style.scrollBehavior = 'smooth';

登入後複製

這非常適合保持您的設計整潔並防止長字串破壞您的佈局。只要確保為使用者提供一種在需要時查看全文的方法，例如工具提示或可擴展元素。

7. CSS 三角形：不需要圖片

需要三角形作為箭頭或工具提示嗎？不要使用 Photoshop – 您可以使用純 CSS 建立一個：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

登入後複製

這會創造一個向上的三角形。您可以調整邊框寬度來改變三角形的大小和比例，並修改邊框的顏色以改變其方向。

額外提示：

想要創造其他形狀嗎？看看這個漂亮的 CSS 形狀產生器：CSS 形狀產生器

8.簡單的CSS漸層背景

漸層可以為您的設計增添深度和趣味。以下是創建簡單線性漸變背景的方法：

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

登入後複製

這會創造從暖橙色到柔和桃色的水平漸變。您可以調整顏色和方向以滿足您的需求。對於更複雜的漸變，請查看 CSS Gradient 等工具為您產生程式碼。

9.腦白質切除貓頭鷹選擇器

不要讓奇怪的名字嚇到你——這個選擇器對於在元素之間添加一致的間距非常有用：

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

登入後複製

此選擇器針對直接跟隨另一個元素的任何元素，請新增上邊距。這是在佈局中保持垂直節奏的好方法，而無需在每個元素中添加邊距類別。

小心這個！雖然它功能強大，但如果使用不當，也可能會產生意想不到的後果。考慮在特定容器上而不是全域使用它。

10. 用於輕鬆主題化的 CSS 變量

最後但並非最不重要的一點是，讓我們來談談 CSS 變數（也稱為自訂屬性）。它們是創建靈活的主題設計的遊戲規則改變者：

.center-me {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

登入後複製

透過在 :root 偽類中定義變量，您可以在整個樣式表中重複使用這些值。需要改變你的原色嗎？只需更新一次變量，它就會在您的整個設計中傳播。

把它們放在一起：一個現實世界的例子

現在我們已經介紹了這些很棒的 CSS 片段，讓我們看看如何在現實場景中一起使用其中一些片段。想像一下我們正在為部落格文章預覽建立一個簡單的卡片元件：

html {
  scroll-behavior: smooth;
}

登入後複製

這是用來設定其樣式的 CSS，其中包含我們的幾個片段：

document.documentElement.style.scrollBehavior = 'smooth';

登入後複製

在此範例中，我們使用 CSS 變數來輕鬆設定主題，使用 truncate 類別來處理長標題，並添加平滑滾動和自訂捲軸以實現美觀的外觀。卡片佈局本身使用 Flexbox 原則進行對齊和間距。

結論：提升你的 CSS 遊戲水平

好了，夥計們，10 個小而強大的 CSS 程式碼片段可以對您的開發工作流程產生巨大影響。從解決常見的佈局挑戰到添加一些細微的修飾，這些片段展示了 CSS 的強大功能和靈活性。

請記住，成為 CSS 嚮導的關鍵不僅僅是了解這些技巧 - 還在於了解何時以及如何使用它們。當您將這些片段合併到您的專案中時，請花時間進行實驗並了解它們的工作原理。不要害怕調整和組合它們以滿足您的特定需求。

在繼續 CSS 之旅時，請記住以下一些最後提示：

保持好奇心：CSS 的世界總是在不斷發展。密切注意可以增強您的工具包的新屬性和技術。
練習，練習，再練習：這些片段使用得越多，它們就會變得越直觀。
閱讀規格：如有疑問，請直接查看來源。官方 CSS 規範可以提供有關屬性如何運作的寶貴見解。
分享您的知識：發現了一個很酷的 CSS 技巧？與其他開發人員分享！ Web 開發社群因共享知識和經驗而蓬勃發展。

那麼，你還在等什麼？啟動您最喜歡的程式碼編輯器並開始使用這些片段。您的樣式表（以及未來的您）將會感謝您！

祝您編碼愉快，願您的 CSS 始終沒有錯誤且美觀！

以上是每個 UI 開發人員都應該知道的 CSS 程式碼片段的詳細內容。更多資訊請關注PHP中文網其他相關文章！