25個(gè)每個(gè)開發(fā)人員都應(yīng)該知道的CSS 技巧
共 7838字，需瀏覽 16分鐘
·
2024-06-06 09:15
點(diǎn)擊上方 前端Q，關(guān)注公眾號(hào)
回復(fù)加群，加入前端Q技術(shù)交流群
CSS（層疊樣式表）是 Web 開發(fā)人員必不可少的工具，可讓你精確地設(shè)置 HTML 元素的樣式。但是，掌握 CSS 不僅僅需要了解基礎(chǔ)知識(shí)。以下 25 個(gè) CSS 技巧可以讓您的生活更輕松，代碼更簡(jiǎn)潔。
1. 垂直和水平居中元素
問題：在容器中垂直和水平居中元素。
解決方案：使用 Flexbox。
.container {display: flex;justify-content: center; /* horizontal */align-items: center; /* vertical */height: 100vh;}
2. 使用 `vw` 實(shí)現(xiàn)響應(yīng)式文本
問題：確保文本與視口成比例縮放。
解決方案：使用 `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. 自定義復(fù)選框和單選按鈕
問題：設(shè)置默認(rèn)復(fù)選框和單選按鈕的樣式。
解決方案：隱藏默認(rèn)輸入并設(shè)置標(biāo)簽的樣式。
<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 網(wǎng)格布局
問題：創(chuàng)建復(fù)雜的布局。
解決方案：使用 CSS 網(wǎng)格。
.container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;}.item {background-color: lightblue;padding: 20px;}
6. 粘性頁(yè)腳
問題：使頁(yè)腳粘在頁(yè)面底部。
解決方案：使用 Flexbox。
body {display: flex;flex-direction: column;min-height: 100vh;}main {flex: 1;}footer {background-color: #f1f1f1;padding: 10px;text-align: center;}
7. 平滑滾動(dòng)
問題：為錨點(diǎn)鏈接添加平滑滾動(dòng)。
解決方案：使用“scroll-behavior”。
html {scroll-behavior: smooth;}
8. 響應(yīng)式圖像
問題：確保圖像具有響應(yīng)性。
解決方案：使用“max-width”。
img {max-width: 100%;height: auto;}
9. 使用省略號(hào)截?cái)辔谋?/span>
問題：截?cái)嘁绯龅奈谋尽?/span>
解決方案：使用“text-overflow”。
.truncate {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 200px; /* or any width */}
10. 自定義滾動(dòng)條
問題：設(shè)置滾動(dòng)條樣式。
解決方案：使用 `::-webkit-scrollbar`。
::-webkit-scrollbar {width: 10px;}::-webkit-scrollbar-track {background: #f1f1f1;}::-webkit-scrollbar-thumb {background: #888;}::-webkit-scrollbar-thumb:hover {background: #555;}
11. 全屏背景圖像
問題：讓背景圖像覆蓋整個(gè)屏幕。
解決方案：使用“background-size”。
.full-screen-bg {background-image: url('background.jpg');background-size: cover;background-position: center;height: 100vh;}
12. 動(dòng)畫漸變背景
問題：創(chuàng)建動(dòng)畫漸變背景。
解決方案：使用 `@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 變量
問題：簡(jiǎn)化主題更改。
解決方案：使用 CSS 變量。
:root {- primary-color:- secondary-color:}button {background-color: var( - primary-color);color: var( - secondary-color);}
16. 對(duì)象適合圖像
問題：確保圖像適合其容器而不會(huì)變形。
解決方案：使用“object-fit”。
.fit-image {width: 100%;height: 200px;object-fit: cover; /* or contain, fill, etc. */}
17. 防止換行
問題：防止文本換行成多行。
解決方案：使用“white-space”。
.no-break {white-space: nowrap;}
18. 全寬元素
問題：讓元素跨越其父元素的整個(gè)寬度。
解決方案：使用“width: 100vw”。
.full-width {width: 100vw;margin-left: calc(50% - 50vw);margin-right: calc(50% - 50vw);}
19. SVG 圖標(biāo)顏色控制
問題：使用 CSS 更改內(nèi)聯(lián) SVG 的顏色。
解決方案：使用 `currentColor`。
.icon {fill: currentColor;}.icon-container {color: #ff6347;}
20. 帶命名區(qū)域的 CSS 網(wǎng)格
問題：使用命名網(wǎng)格區(qū)域創(chuàng)建復(fù)雜布局。
解決方案：使用 `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 過渡
問題：狀態(tài)間平滑過渡。
解決方案：使用“transition”。
.transition-button {background-color: #3498db;transition: background-color 0.3s;}.transition-button:hover {background-color: #2ecc71;}
22. CSS 動(dòng)畫
問題：向元素添加動(dòng)畫。
解決方案：使用 `@keyframes`。
@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); }}.bounce {animation: bounce 2s infinite;}
23. CSS Shape Outsiders
問題：創(chuàng)建非矩形形狀。
解決方案：使用“clip-path”。
.clip-path {clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background-color: #3498db;width: 200px;height: 200px;}
24. 暗黑模式
問題：實(shí)現(xiàn)暗黑模式。
解決方案：使用 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 計(jì)數(shù)器
問題：創(chuàng)建計(jì)數(shù)器。
解決方案：使用“counter-reset”和“counter-increment”。
.counter-list {counter-reset: section;}.counter-list li::before {counter-increment: section;content: "Section " counter(section) ": ";}
這 25 個(gè) CSS 技巧可以顯著改善您的 Web 開發(fā)工作流程，讓您高效地解決常見問題并創(chuàng)建響應(yīng)更快、更動(dòng)態(tài)的網(wǎng)頁(yè)。
往期推薦
最后
歡迎加我微信，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...