25个每个开发人员都应该知道的CSS 技巧-51CTO.COM

CSS（层叠样式表）是 Web 开发人员必不可少的工具，可让你精确地设置 HTML 元素的样式。但是，掌握 CSS 不仅仅需要了解基础知识。以下 25 个 CSS 技巧可以让您的生活更轻松，代码更简洁。

1. 垂直和水平居中元素

问题：在容器中垂直和水平居中元素。

解决方案：使用 Flexbox。

.container {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
height: 100vh;
}1.
2.
3.
4.
5.
6.

2. 使用 `vw` 实现响应式文本

问题：确保文本与视口成比例缩放。

解决方案：使用 `vw` 单位。

h1 {
font-size: 5vw;
}1.
2.
3.

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;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

4. 自定义复选框和单选按钮

问题：设置默认复选框和单选按钮的样式。

解决方案：隐藏默认输入并设置标签的样式。

<label class="custom-checkbox">
<input type="checkbox" />
<span class="checkmark"></span>
</label>1.
2.
3.
4.

.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;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

5. CSS 网格布局

问题：创建复杂的布局。

解决方案：使用 CSS 网格。

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
}1.
2.
3.
4.
5.
6.
7.
8.
9.

6. 粘性页脚

问题：使页脚粘在页面底部。

解决方案：使用 Flexbox。

body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

7. 平滑滚动

问题：为锚点链接添加平滑滚动。

解决方案：使用“scroll-behavior”。

html {
scroll-behavior: smooth;
}1.
2.
3.

8. 响应式图像

问题：确保图像具有响应性。

解决方案：使用“max-width”。

img {
max-width: 100%;
height: auto;
}1.
2.
3.
4.

9. 使用省略号截断文本

问题：截断溢出的文本。

解决方案：使用“text-overflow”。

.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; /* or any width */
}1.
2.
3.
4.
5.
6.

10. 自定义滚动条

问题：设置滚动条样式。

解决方案：使用 `::-webkit-scrollbar`。

::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

11. 全屏背景图像

问题：让背景图像覆盖整个屏幕。

解决方案：使用“background-size”。

.full-screen-bg {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
}1.
2.
3.
4.
5.
6.

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;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

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 */
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

14. 图像悬停效果

问题：为图像添加悬停效果。

解决方案：使用 `:hover`。

.image-hover img {
transition: transform 0.3s;
}
.image-hover img:hover {
transform: scale(1.1);
}1.
2.
3.
4.
5.
6.

15. CSS 变量

问题：简化主题更改。

解决方案：使用 CSS 变量。

:root {
 - primary-color: #3498db;
 - secondary-color: #2ecc71;
}
button {
background-color: var( - primary-color);
color: var( - secondary-color);
}1.
2.
3.
4.
5.
6.
7.
8.

16. 对象适合图像

问题：确保图像适合其容器而不会变形。

解决方案：使用“object-fit”。

.fit-image {
width: 100%;
height: 200px;
object-fit: cover; /* or contain, fill, etc. */
}1.
2.
3.
4.
5.

17. 防止换行

问题：防止文本换行成多行。

解决方案：使用“white-space”。

.no-break {
white-space: nowrap;
}1.
2.
3.

18. 全宽元素

问题：让元素跨越其父元素的整个宽度。

解决方案：使用“width: 100vw”。

.full-width {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}1.
2.
3.
4.
5.

19. SVG 图标颜色控制

问题：使用 CSS 更改内联 SVG 的颜色。

解决方案：使用 `currentColor`。

.icon {
fill: currentColor;
}
.icon-container {
color: #ff6347;
}1.
2.
3.
4.
5.
6.

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;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

21. CSS 过渡

问题：状态间平滑过渡。

解决方案：使用“transition”。

.transition-button {
background-color: #3498db;
transition: background-color 0.3s;
}
.transition-button:hover {
background-color: #2ecc71;
}1.
2.
3.
4.
5.
6.
7.

22. CSS 动画

问题：向元素添加动画。

解决方案：使用 `@keyframes`。

@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce {
animation: bounce 2s infinite;
}1.
2.
3.
4.
5.
6.
7.

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;
}1.
2.
3.
4.
5.
6.

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);
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

25. CSS 计数器

问题：创建计数器。

解决方案：使用“counter-reset”和“counter-increment”。

.counter-list {
counter-reset: section;
}
.counter-list li::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}1.
2.
3.
4.
5.
6.
7.

这 25 个 CSS 技巧可以显著改善您的 Web 开发工作流程，让您高效地解决常见问题并创建响应更快、更动态的网页。