簡介：使用這些方便的 CSS 技巧來增強您的樣式表
嘿，UI 開發人員朋友們！您準備好為您的樣式表加入一些活力了嗎？我們都知道 CSS 既可以是祝福，也可以是詛咒。它非常強大，但有時感覺就像我們在與一隻頑固的章魚搏鬥，試圖讓我們的佈局恰到好處。這就是為什麼我整理了這 10 個小而強大的 CSS 程式碼片段的集合，它們將使您的生活更輕鬆，讓您的設計閃閃發光。
這些不僅僅是一些老片段——它們是那種會讓你拍著額頭說：「我為什麼沒有想到這一點？」的技巧。無論您是 CSS 新手還是經驗豐富的專業人士，我保證您都會在這裡找到有用的東西。所以，拿起你最喜歡的飲料，啟動你的程式碼編輯器，讓我們深入了解一些 CSS 魔法！
1.神奇的居中技巧
我們都經歷過這樣的情況 - 嘗試將 div 垂直和水平居中，但最終得到了混亂的浮動和邊距。好吧，告別那些令人沮喪的日子，因為這個小片段即將成為你新的最好的朋友：
.center-me {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}此程式碼使用 CSS 轉換的強大功能將元素完美地置於其父容器中的中心。它的工作原理如下：
-
我們將元素的位置設為絕對位置，這將其脫離正常的文件流。
-
我們將其從容器的頂部和左側移動 50%。
-
然後，transform 屬性會將元素向後移動其寬度和高度的一半。
結果呢？每次內容都完美居中。不再需要擺弄邊距或因不合作的佈局而煩惱！
-
平滑滾動以取勝
想要為您的頁面導航加入一絲優雅嗎？此程式碼片段只需幾行程式碼即可為您提供黃油般平滑的滾動效果：
html {
scroll-behavior: smooth;
}就是這樣！這個簡單的聲明告訴瀏覽器在滾動到頁面上的錨連結時使用平滑的動畫。這是一個小小的改變，但可以使您的網站感覺更加精緻和專業。
提示：
如果您想變得更奇特，您甚至可以使用一些 JavaScript 自訂滾動速度：
document.documentElement.style.scrollBehavior = 'smooth';-
Clearfix Hack：馴服浮動元素
花車可能是棘手的野獸。他們有一個令人討厭的習慣，就是打破容器並對你的佈局造成嚴重破壞。輸入clearfix hack：
.clearfix::after {
content: "";
display: table;
clear: both;
}將此類新增至具有浮動子專案的任何容器中，並觀察佈局中的順序復原。 ::after 偽元素在容器內容之後建立一個不可見的框，這會清除浮動並保持一切整潔。
-
自訂捲軸：因為預設捲軸很無聊
誰說滾動條一定是醜的？使用此 CSS 片段，您可以設定捲軸的樣式以符合您網站的設計：
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}此程式碼為您提供了一個時尚的自訂捲軸，可在基於 WebKit 的瀏覽器（如 Chrome 和 Safari）中運作。您可以調整顏色和尺寸以完美適合您的設計。
請記住：雖然此程式碼片段非常適合 WebKit 瀏覽器，但其他瀏覽器可能不支援這些偽元素。始終在不同的瀏覽器上進行測試，以確保所有使用者獲得一致的體驗。
5.Flexbox居中快捷鍵
Flexbox 徹底改變了我們處理 CSS 佈局的方式。這是使用 Flexbox 垂直和水平居中內容的快速但骯髒的方法：
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}將此類應用到容器中，它的所有子元素將完美居中。它簡單、功能強大，並且適用於所有現代瀏覽器。什麼是不愛？
-
用省略號截斷文本
有時您需要在有限的空間中顯示文本，但又不希望它換行或溢出。此程式碼片段將截斷您的文字並在末尾加入省略號 (...)：
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}這非常適合保持設計簡潔並防止長文本字串破壞佈局。只要確保為使用者提供一種在需要時查看全文的方法，例如工具提示或可擴展元素。
-
CSS 三角形：不需要圖片
需要一個三角形作為箭頭或工具提示嗎？不要使用 Photoshop – 您可以使用純 CSS 建立一個：
.triangle {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #333;
}這將建立一個指向上方的三角形。您可以調整邊框寬度以變更三角形的大小和比例，並修改邊框的顏色以變更其方向。
額外提示：
想要創造其他形狀嗎？看看這個漂亮的 CSS 形狀產生器： CSS 形狀產生器
8.簡單的CSS漸層背景
漸層可以為您的設計增添深度和趣味。以下是建立簡單線性漸層背景的方法：
.gradient-bg {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}這會產生從暖橙色到柔和桃色的水平漸變。您可以調整顏色和方向以滿足您的需求。對於更複雜的漸變，請查看CSS Gradient等工具來為您產生程式碼。
9.腦葉白質切除貓頭鷹選擇器
不要讓這個奇怪的名字嚇到你——這個選擇器對於在元素之間加入一致的間距非常有用：
* + * {
margin-top: 1.5em;
}此選擇器針對直接跟隨另一個元素的任何元素，並新增上邊距。這是在佈局中保持垂直節奏的好方法，而無需在每個元素中加入邊距類別。
小心這個！雖然它功能強大，但如果使用不當，也可能會產生意想不到的後果。考慮在特定容器上而不是全域使用它。
-
用於輕鬆主題化的 CSS 變數
最後但並非最不重要的一點是，讓我們來談談 CSS 變數（也稱為自訂屬性）。它們是創造靈活、主題化設計的遊戲規則改變者：
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size: 16px;
}
.button {
background-color: var(--primary-color);
font-size: var(--font-size);
}透過在 :root 偽類中定義變數，您可以在整個樣式表中重複使用這些值。需要改變你的原色嗎？只需更新一次變數，它就會在整個設計中傳播。
把它們放在一起：一個現實世界的例子
現在我們已經介紹了這些很棒的 CSS 片段，讓我們看看如何在現實場景中一起使用其中一些片段。想像一下我們正在為部落格文章預覽建立一個簡單的卡片元件：
<div class="card">
<div class="card-image">
<img src="blog-post-image.jpg" alt="Blog post feature image">
</div>
<div class="card-content">
<h2 class="card-title truncate">This is a really long blog post title that might overflow</h2>
<p class="card-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
<a href="#" class="card-link">Read More</a>
</div>
</div>這是用於設定其樣式的 CSS，其中包含我們的幾個片段：
:root {
--primary-color: #007bff;
--text-color: #333;
--background-color: #f8f9fa;
}
.card {
width: 300px;
background-color: var(--background-color);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-image img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 20px;
}
.card-title {
color: var(--text-color);
margin-bottom: 10px;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-excerpt {
color: var(--text-color);
font-size: 14px;
line-height: 1.5;
margin-bottom: 15px;
}
.card-link {
display: inline-block;
color: var(--primary-color);
text-decoration: none;
font-weight: bold;
}
.card-link:hover {
text-decoration: underline;
}
/* Smooth scrolling for the entire page */
html {
scroll-behavior: smooth;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--background-color);
}
::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #0056b3;
}
在此範例中，我們使用 CSS 變數來輕鬆設定主題，使用 truncate 類別來處理長標題，並加入平滑滾動和自訂捲軸以獲得精美的外觀。卡片佈局本身使用彈性盒原理進行對齊和間距。
結論：提升你的 CSS 遊戲水平
好了，各位，10 個小而強大的 CSS 程式碼片段可以對您的開發工作流程產生很大的影響。從解決常見的佈局挑戰到加入一些細微的修飾，這些片段展示了 CSS 的強大功能和靈活性。
請記住，成為 CSS 嚮導的關鍵不僅僅是了解這些技巧，還要了解何時以及如何使用它們。當您將這些片段合併到您的專案中時，請花時間進行實驗並了解它們的工作原理。不要害怕調整和組合它們以滿足您的特定需求。
在繼續您的 CSS 之旅時，請記住以下一些最後提示：
-
保持好奇心：CSS 的世界總是在不斷發展。密切注意可以增強您的工具包的新屬性和技術。
-
練習、練習、再練習：這些片段使用得越多，它們就會變得越直觀。
-
閱讀規格：如有疑問，請直接查找來源。官方 CSS 規範可以提供有關屬性如何運作的寶貴見解。
-
分享您的知識：發現了一個很酷的 CSS 技巧？與其他開發人員分享！ Web 開發社群依靠共享知識和經驗而蓬勃發展。
那麼，您還在等什麼呢？啟動您最喜歡的程式碼編輯器並開始使用這些片段。您的樣式表（以及未來的您）將會感謝您！
祝您編碼愉快，並祝福您的 CSS 始終沒有錯誤且美觀！
原文出處：https://dev.to/nnnirajn/10-css-code-snippets-every-ui-developer-should-know-2eb1
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式