每个 UI 开发人员都应该知道的 10 个 CSS 代码片段

2025-06-10

每个 UI 开发人员都应该知道的 10 个 CSS 代码片段

简介：使用这些便捷的 CSS 技巧增强你的样式表

嗨，UI 开发者们！准备好为你的样式表增添一些活力了吗？我们都知道，CSS 既是福音，也是祸害。它功能强大，但有时我们感觉就像在与一只顽固的章鱼搏斗，努力让布局变得恰到好处。因此，我整理了这 10 个小而强大的 CSS 代码片段，它们能让你的工作更轻松，让你的设计更出色。

这些可不是普通的旧代码片段——它们可是那种会让你拍着额头感叹“我怎么没想到呢？”的技巧。无论你是 CSS 新手还是经验丰富的老手，我保证你都能在这里找到一些有用的东西。所以，拿起你最爱的饮料，打开你的代码编辑器，让我们一起探索 CSS 的奥秘吧！

1. 神奇的居中技巧

我们都遇到过这种情况——尝试让一个 div 垂直和水平居中，结果却弄得浮动和外边距乱七八糟。好了，告别这些令人沮丧的日子吧，因为这个小代码片段即将成为你的新朋友：

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

这段代码利用 CSS 变换的强大功能，将元素完美地置于其父容器的中心。具体工作原理如下：

  1. 我们将元素的位置设置为绝对位置，这使其脱离正常的文档流。
  2. 我们将其从容器的顶部和左侧移动 50%。
  3. 然后，transform 属性将元素移回其自身宽度和高度的一半。

结果如何？每次都能完美居中内容。再也不用费力调整边距，也不用为布局不协调而抓狂了！

2. 流畅滚动，成就胜利

想要给你的页面导航增添一丝优雅吗？只需几行代码，这段代码就能让你的页面滚动起来非常顺畅：

html {
  scroll-behavior: smooth;
}
Enter fullscreen mode Exit fullscreen mode

就是这样！这个简单的声明告诉浏览器在滚动到页面上的锚点链接时使用流畅的动画。这个小小的改变，却能让你的网站看起来更加精致专业。

专业提示：

如果您想要更酷炫一点，您甚至可以使用一点 JavaScript 来自定义滚动速度：

document.documentElement.style.scrollBehavior = 'smooth';
Enter fullscreen mode Exit fullscreen mode

3. Clearfix Hack：驯服浮动元素

浮动元素可能非常棘手。它们有个坏习惯，就是会脱离容器，破坏你的布局。这时，就用 clearfix hack 来解决这个问题：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
Enter fullscreen mode Exit fullscreen mode

将此类添加到任何带有浮动子元素的容器中，即可看到布局恢复有序。::after 伪元素会在容器内容后创建一个不可见的框，从而清除浮动元素，使所有内容保持整洁。

4. 自定义滚动条：默认滚动条太无聊

谁说滚动条就一定丑？用这段 CSS 代码，你可以设置滚动条的样式，使其与网站设计相得益彰：

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

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

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

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
Enter fullscreen mode Exit fullscreen mode

这段代码为你提供了一个美观、可自定义的滚动条，可在基于 WebKit 的浏览器（例如 Chrome 和 Safari）中使用。你可以调整颜色和尺寸，使其完美契合你的设计。

请记住：虽然此代码片段非常适合 WebKit 浏览器，但其他浏览器可能不支持这些伪元素。请务必在不同的浏览器上进行测试，以确保所有用户都能获得一致的体验。

5. Flexbox 居中快捷键

弹性盒子彻底改变了我们在 CSS 中处理布局的方式。以下是使用弹性盒子实现内容垂直和水平居中的一种快速而简单的方法：

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

将此类应用于容器，其所有子元素将完美居中。它简洁、强大，并且兼容所有现代浏览器。还有什么理由不爱呢？

6. 使用省略号截断文本

有时您需要在有限的空间内显示文本，但又不希望文本换行或溢出。此代码片段将截断文本并在末尾添加省略号 (...)：

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
Enter fullscreen mode Exit fullscreen mode

这对于保持设计简洁并防止长文本串破坏布局非常有效。只需确保为用户提供必要的全文查看方式，例如工具提示或可扩展元素。

7. CSS三角形：无需图片

需要一个三角形来做箭头或工具提示？不用 Photoshop，你可以用纯 CSS 创建一个：

.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #333;
}
Enter fullscreen mode Exit fullscreen mode

这样就创建了一个向上的三角形。你可以调整边框宽度来改变三角形的大小和比例，也可以修改边框的颜色来改变其方向。

额外提示：

想要创建其他形状？看看这个漂亮的 CSS 形状生成器：CSS 形状生成器

8.简单的CSS渐变背景

渐变可以为你的设计增添深度和趣味。以下是如何创建简单的线性渐变背景：

.gradient-bg {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}
Enter fullscreen mode Exit fullscreen mode

这将创建一个从暖橙色到柔和桃色的水平渐变。您可以根据需要调整颜色和方向。如果需要更复杂的渐变，请使用CSS Gradient等工具来生成代码。

9. 猫头鹰选择器

不要让这个奇怪的名字吓到你——这个选择器对于在元素之间添加一致的间距非常有用：

* + * {
  margin-top: 1.5em;
}
Enter fullscreen mode Exit fullscreen mode

此选择器会选择任何紧跟其他元素的元素，并添加上外边距。这是一种在布局中保持垂直节奏的好方法，无需为每个元素添加外边距类。

小心使用！虽然它功能强大，但如果使用不当，也可能造成意想不到的后果。建议在特定容器上使用它，而不是全局使用。

10. CSS 变量轻松实现主题化

最后，同样重要的是，我们来谈谈 CSS 变量（也称为自定义属性）。它们对于创建灵活、可主题化的设计至关重要：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size: 16px;
}

.button {
  background-color: var(--primary-color);
  font-size: var(--font-size);
}
Enter fullscreen mode Exit fullscreen mode

通过在 :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>
Enter fullscreen mode Exit fullscreen mode

下面是 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;
}
Enter fullscreen mode Exit fullscreen mode

在此示例中，我们使用 CSS 变量来轻松设置主题，使用 truncate 类来处理长标题，并添加了平滑滚动和自定义滚动条以打造更美观的外观。卡片布局本身使用 flexbox 原则进行对齐和间距设置。

结论：提升你的 CSS 水平

好了，各位，这就是 10 个精简却强大的 CSS 代码片段，它们可以极大地改善你的开发工作流程。从解决常见的布局难题到添加一些小细节，这些代码片段充分展现了 CSS 的强大功能和灵活性。

记住，成为 CSS 高手的关键不仅仅是掌握这些技巧，还在于了解何时以及如何使用它们。在将这些代码片段融入到你的项目中时，请花时间进行实验并了解它们的工作原理。不要害怕根据你的特定需求进行调整和组合。

在您继续 CSS 之旅时，请记住以下几点建议：

  1. 保持好奇心：CSS 的世界一直在不断发展。请密切关注能够增强你的工具包的新属性和技术。
  2. 练习，练习，练习：你使用这些片段的次数越多，它们就会变得越直观。
  3. 阅读规范：如有疑问，请直接查阅源代码。官方 CSS 规范可以提供有关属性工作原理的宝贵见解。
  4. 分享你的知识：发现了酷炫的 CSS 技巧？快来和你的开发者同行分享吧！Web 开发社区的蓬勃发展离不开知识和经验的共享。

那么，还在等什么？打开你最喜欢的代码编辑器，开始使用这些代码片段吧！你的样式表（以及你未来的自己）都会感谢你的！

祝您编码愉快，并希望您的 CSS 永远漂亮且无错误！

⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
卓越的设计与卓越的可用性的完美结合！需要惊艳的用户界面吗？
让我们携手共创非凡！🚀
请联系我进行 UI 开发！

https://www.linkedin.com/in/niraj-narkhede-ui-developer/⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
​

鏂囩珷鏉ユ簮锛�https://dev.to/nnnirajn/10-css-code-snippets-every-ui-developer-should-know-2eb1
Devto 翻译
PREV
C/C++中的按位运算
NEXT
从头开始学习 ASP.NET