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

嘿，各位UI设计师！你们准备好了给样式表增添一些亮点了吗？大家都知道，CSS既是一种福利也是一种负担。它非常强大，但有时会感觉像是在跟一只固执的章鱼搏斗，只为让布局尽善尽美。这就是我整理的这10个小巧却强大的CSS代码片段，这些代码片段会让您的工作更轻松，使您的设计更加出色。

这些可不是一般的技巧——它们会让你拍着脑门说：“我怎么没想到这个？”不论你是CSS新手还是老手，我保证你会在这里发现一些有用的东西。所以，拿起你最爱的饮料，打开你的代码编辑器，准备好，让我们一起来看看CSS魔法！

我们大家都经历过这种情况——试图让<div>`元素既垂直居中又水平居中，结果却发现浮动和边距混乱不堪。现在，告别那些令人头痛的日子吧，因为这个小技巧即将成为你的好帮手：

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

全屏切换

这段代码利用了CSS变换功能，让一个元素在其父容器中完美居中。具体实现方法如下：

1. 我们将元素的位置设置为绝对，使它脱离文档的正常流。
2. 我们将其向上和向左移动50%。
3. 然后使用transform属性将其自身宽度和高度各减少一半。

结果？每次内容都能完美居中。再也不用为调整边距而烦恼，也不用为不听话的布局而抓狂！

想不想让你的页面滚动变得丝滑，增添一抹优雅？只需几行代码，就能让你的滚动效果变得丝滑：

(这里的代码片段应保持不变，原文为英文，此处不翻译)

    html {
      scroll-behavior: smooth;
    }

设置HTML元素的滚动行为为平滑。

点击进入全屏模式，点击退出全屏模式

就是这样！这句话告诉浏览器在滚动到页面上的锚链接时使用流畅的动画。这只是一个小小的改动，能带来很大的不同，让您的网站感觉更精致、更专业。

小贴士：

如果你想搞点花哨，甚至可以用一点JavaScript代码来调整滚动速度。

将滚动行为设置为平滑滚动：document.documentElement.style.scrollBehavior = 'smooth';

点击全屏 点击退出全屏

浮动元素有时候会变得很棘手。它们喜欢跳出容器，导致布局乱七八糟。这时就可以用clearfix这个小技巧（clearfix 是一种清除浮动的方法）。

    .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浏览器上表现良好，但其他浏览器可能不支持这些元素。始终在不同浏览器上测试，以确保所有用户都能得到一致的体验。

Flexbox 已经彻底改变了我们使用 CSS 来布局的方式。这里有一个使用 flexbox 的快速而脏的技巧，可以同时垂直和水平居中内容：

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

全屏 退出全屏

将此类应用于一个容器，其所有子元素都将被完美地居中。它简单、强大，且能在所有现代浏览器中完美运行。它有什么不好的地方，让人不爱它呢？

有时你可能需要在一个狭小的空间里显示文本，但不想让它回行或溢出。这段代码会截取文本并在末尾添加省略号（...）：

    /*截断样式*/
    .truncate {
      /*不换行*/
      white-space: nowrap;
      /*隐藏溢出内容*/
      overflow: hidden;
      /*显示省略号*/
      text-overflow: ellipsis;
    }

全屏模式 退出全屏

这非常适合保持你的设计简洁，并避免长段文字破坏布局。只需要确保为用户提供一种查看完整文本的方式，例如工具提示或可扩展的元素。

如果你需要一个箭头或工具提示所需的三角形，不用找 Photoshop——你可以用纯 CSS 轻松搞定。

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

切换到全屏。退出全屏。

这创建了一个朝上的三角形。你可以调整边框宽度来改变三角形的大小和形状，并更改边框的颜色来改变三角形的方向。

额外小贴士：

想试试其他形状吗？试试这个超实用的CSS形状生成器：CSS形状生成器

下面是如何制作一个简单的线性渐变背景，以增加设计的层次感和吸引力。

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

这行代码定义了一个背景渐变样式，从右到左，颜色从#ff7e5f渐变到#feb47b。

全屏模式 退出全屏

这会创建一个从温暖橙色渐变到柔和桃色的水平渐变。你可以根据需要调整颜色和方向。对于更复杂的渐变，你可以使用类似CSS Gradient这样的工具来自动生成代码。

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

* + * {
      margin-top: 1.5em;
    }

进入全屏模式 退出全屏

此选择器给直接紧跟另一个元素的任何元素添加上外边距。它是一种在无需为每个元素单独添加外边距类的情况下，保持布局的垂直节奏的好方法。

小心使用这个功能！虽然它很强大，但如果不谨慎使用，可能会带来意外的副作用。建议你只对特定的容器使用它，而不是在整个系统中全局应用。

最后但同样重要的一点是，让我们来谈谈 CSS 变量，比如自定义属性。它们是创建灵活和可主题化设计的利器，是一种游戏规则改变者。

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

    .按钮类 {
      background-color: var(--primary-color);
      font-size: 16px;
    }

进入全屏 退出全屏

在:root伪类中定义变量，可以让它们在整个样式表中重复使用。需要更改主色吗？只需更新一次变量，它就会在设计中的每个角落都生效。

现在我们已经介绍了这些超赞的 CSS 代码片段，让我们看看如何在实际项目中结合使用其中一些代码片段。假设我们要为博客文章的预览卡片创建一个简单的卡片组件：

    <div class="card">
      <div class="card-image">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="blog-post-image.jpg" alt="博客文章图片">
      </div>
      <div class="card-content">
        <h2 class="card-title truncate">这是一个很长的博客文章标题，可能会太长而溢出</h2>
        <p class="card-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
        <a href="#" class="card-link">了解更多</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;
    }

    /* 整个页面的平滑滚动 */
    html {
      scroll-behavior: smooth;
    }

    /* 自定义滚动条 */
    ::-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类来处理长标题，并添加了平滑滚动效果和自定义滚动条样式以让界面看起来更精致。卡片布局则使用了flexbox布局来进行对齐和间距。

就这样，各位——这里有10个小巧但强大的CSS代码片段，可以在您的开发工作中产生重大影响。从解决常见的布局难题到增添一些细微的润色，这些代码片段体现了CSS的强大和灵活性。

记得，成为CSS大师的关键并不只是知道这些技巧，更重要的是理解何时以及如何应用它们。当你把这些代码片段应用到你的项目中时，花时间测试并理解它们的工作原理。不要害怕调整和组合它们以适应你的特定需求。

以下是在你继续 CSS 学习之旅时需要注意的几点。

1. 保持好奇心：CSS的世界总是不断变化。留意新的属性和技巧，以便丰富你的工具箱。
2. 多多练习：用得越多，这些代码片段就越直观。
3. 不确定时，直接查阅官方文档。官方的CSS规范可以提供关于属性如何工作的宝贵见解。
4. 发现了一个超酷的CSS技巧吗？跟你的同事开发者们分享吧！Web开发社区依靠共享的知识和经验蓬勃发展。

所以，那你还在等什么？打开你最常用的代码编辑器，开始试试这些代码片段吧。你的样式表和未来的你会感激你的。

祝你编程愉快，愿你的 CSS（层叠样式表）永远没有 bug，代码整洁且既美观。