25個每個開發人員都應該知道的CSS 技巧
CSS（層疊樣式表）是 Web 開發人員必不可少的工具，可讓你精確地設置 HTML 元素的樣式。但是，掌握 CSS 不僅僅需要了解基礎知識。以下 25 個 CSS 技巧可以讓您的生活更輕松，代碼更簡潔。
1. 垂直和水平居中元素
問題：在容器中垂直和水平居中元素。
解決方案：使用 Flexbox。
.container {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
height: 100vh;
}2. 使用 `vw` 實現響應式文本
問題：確保文本與視口成比例縮放。
解決方案：使用 `vw` 單位。
h1 {
font-size: 5vw;
}3. 保持縱橫比
問題：保持元素的縱橫比。
解決方案：使用基于百分比的填充。
.aspect-ratio-box {
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
position: relative;
}
.aspect-ratio-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}4. 自定義復選框和單選按鈕
問題：設置默認復選框和單選按鈕的樣式。
解決方案：隱藏默認輸入并設置標簽的樣式。
<label class="custom-checkbox">
<input type="checkbox" />
<span class="checkmark"></span>
</label>.custom-checkbox input {
display: none;
}
.custom-checkbox .checkmark {
width: 20px;
height: 20px;
background-color: #eee;
border-radius: 4px;
}
.custom-checkbox input:checked + .checkmark {
background-color: #2196F3;
}5. CSS 網格布局
問題：創建復雜的布局。
解決方案：使用 CSS 網格。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
}6. 粘性頁腳
問題：使頁腳粘在頁面底部。
解決方案：使用 Flexbox。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}7. 平滑滾動
問題：為錨點鏈接添加平滑滾動。
解決方案：使用“scroll-behavior”。
html {
scroll-behavior: smooth;
}8. 響應式圖像
問題：確保圖像具有響應性。
解決方案：使用“max-width”。
img {
max-width: 100%;
height: auto;
}9. 使用省略號截斷文本
問題：截斷溢出的文本。
解決方案：使用“text-overflow”。
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; /* or any width */
}10. 自定義滾動條
問題：設置滾動條樣式。
解決方案：使用 `::-webkit-scrollbar`。
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}11. 全屏背景圖像
問題：讓背景圖像覆蓋整個屏幕。
解決方案：使用“background-size”。
.full-screen-bg {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
}12. 動畫漸變背景
問題：創建動畫漸變背景。
解決方案：使用 `@keyframes`。
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animated-gradient {
background: linear-gradient(270deg, #ff7e5f, #feb47b);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}13. Overlays
問題：向圖像添加覆蓋。
解決方案：使用 `::after` 偽元素。
.image-overlay {
position: relative;
}
.image-overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}14. 圖像懸停效果
問題：為圖像添加懸停效果。
解決方案：使用 `:hover`。
.image-hover img {
transition: transform 0.3s;
}
.image-hover img:hover {
transform: scale(1.1);
}15. CSS 變量
問題：簡化主題更改。
解決方案：使用 CSS 變量。
:root {
- primary-color: #3498db;
- secondary-color: #2ecc71;
}
button {
background-color: var( - primary-color);
color: var( - secondary-color);
}16. 對象適合圖像
問題：確保圖像適合其容器而不會變形。
解決方案：使用“object-fit”。
.fit-image {
width: 100%;
height: 200px;
object-fit: cover; /* or contain, fill, etc. */
}17. 防止換行
問題：防止文本換行成多行。
解決方案：使用“white-space”。
.no-break {
white-space: nowrap;
}18. 全寬元素
問題：讓元素跨越其父元素的整個寬度。
解決方案：使用“width: 100vw”。
.full-width {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}19. SVG 圖標顏色控制
問題：使用 CSS 更改內聯 SVG 的顏色。
解決方案：使用 `currentColor`。
.icon {
fill: currentColor;
}
.icon-container {
color: #ff6347;
}20. 帶命名區域的 CSS 網格
問題：使用命名網格區域創建復雜布局。
解決方案：使用 `grid-template-areas`。
.grid-container {
display: grid;
grid-template-areas:
'header header'
'sidebar content'
'footer footer';
grid-gap: 10px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}21. CSS 過渡
問題：狀態間平滑過渡。
解決方案：使用“transition”。
.transition-button {
background-color: #3498db;
transition: background-color 0.3s;
}
.transition-button:hover {
background-color: #2ecc71;
}22. CSS 動畫
問題：向元素添加動畫。
解決方案：使用 `@keyframes`。
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce {
animation: bounce 2s infinite;
}23. CSS Shape Outsiders
問題：創建非矩形形狀。
解決方案：使用“clip-path”。
.clip-path {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #3498db;
width: 200px;
height: 200px;
}24. 暗黑模式
問題：實現暗黑模式。
解決方案：使用 CSS 變量和媒體查詢。
:root {
- bg-color: #fff;
- text-color: #000;
}
@media (prefers-color-scheme: dark) {
:root {
- bg-color: #333;
- text-color: #fff;
}
}
body {
background-color: var( - bg-color);
color: var( - text-color);
}25. CSS 計數器
問題：創建計數器。
解決方案：使用“counter-reset”和“counter-increment”。
.counter-list {
counter-reset: section;
}
.counter-list li::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}這 25 個 CSS 技巧可以顯著改善您的 Web 開發工作流程，讓您高效地解決常見問題并創建響應更快、更動態的網頁。
