每个 UI 开发人员都应该知道的 CSS 代码片段-css教程-PHP中文网

CSS Code Snippets Every UI Developer Should Know

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

嘿，UI 开发人员朋友们！您准备好为您的样式表添加一些活力了吗？我们都知道 CSS 既可以是祝福，也可以是诅咒。它非常强大，但有时感觉就像我们在与一只顽固的章鱼搏斗，试图让我们的布局恰到好处。这就是为什么我整理了这 10 个小而强大的 CSS 代码片段的集合，它们将使您的生活更轻松，让您的设计闪闪发光。

这些不仅仅是一些旧片段 - 它们是那种会让你拍着额头说：“我为什么没有想到这一点？”的技巧。无论您是 CSS 新手还是经验丰富的专业人士，我保证您都会在这里找到有用的东西。所以，拿起你最喜欢的饮料，启动你的代码编辑器，让我们深入了解一些 CSS 魔法！

1.神奇的居中技巧

我们都经历过这样的情况 - 尝试将 div 垂直和水平居中，但最终得到了混乱的浮动和边距。好吧，告别那些令人沮丧的日子，因为这个小片段即将成为你新的最好的朋友：

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

登录后复制

此代码使用 CSS 转换的强大功能将元素完美地居中于其父容器中。其工作原理如下：

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

结果呢？每次内容都完美居中。不再需要摆弄边距或因不合作的布局而烦恼！

2. 平滑滚动以取胜

想要为您的页面导航添加一丝优雅吗？此代码片段只需几行代码即可为您提供黄油般平滑的滚动效果：

html {
  scroll-behavior: smooth;
}

登录后复制

就是这样！这个简单的声明告诉浏览器在滚动到页面上的锚链接时使用平滑的动画。这是一个小小的改变，但可以使您的网站感觉更加精致和专业。

专业提示：

如果您想变得更奇特，您甚至可以使用一点 JavaScript 自定义滚动速度：

document.documentElement.style.scrollBehavior = 'smooth';

登录后复制

3. Clearfix Hack：驯服浮动元素

花车可能是棘手的野兽。他们有一个令人讨厌的习惯，就是打破容器并对你的布局造成严重破坏。输入clearfix hack：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

登录后复制

将此类添加到任何具有浮动子级的容器中，并观察布局中的顺序恢复情况。 ::after 伪元素在容器内容之后创建一个不可见的框，这会清除浮动并保持一切整洁。

4. 自定义滚动条：因为默认滚动条很无聊

谁说滚动条一定是丑陋的？使用此 CSS 片段，您可以设置滚动条的样式以匹配您网站的设计：

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

登录后复制

此代码为您提供了一个时尚的自定义滚动条，可在基于 WebKit 的浏览器（如 Chrome 和 Safari）中工作。您可以调整颜色和尺寸以完美适合您的设计。

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

5.Flexbox居中快捷键

Flexbox 彻底改变了我们处理 CSS 布局的方式。这是使用 Flexbox 垂直和水平居中内容的快速但肮脏的方法：

html {
  scroll-behavior: smooth;
}

登录后复制

将该类应用到容器中，它的所有子元素将完美居中。它简单、功能强大，并且适用于所有现代浏览器。有什么理由不爱呢？

6. 用省略号截断文本

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

document.documentElement.style.scrollBehavior = 'smooth';

登录后复制

这非常适合保持您的设计整洁并防止长字符串破坏您的布局。只要确保为用户提供一种在需要时查看全文的方式，例如工具提示或可扩展元素。

7. CSS 三角形：不需要图像

需要三角形作为箭头或工具提示吗？不要使用 Photoshop – 您可以使用纯 CSS 创建一个：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

登录后复制

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

额外提示：

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

8.简单的CSS渐变背景

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

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

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

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

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

登录后复制

这会创建从暖橙色到柔和桃色的水平渐变。您可以调整颜色和方向以满足您的需要。对于更复杂的渐变，请查看 CSS Gradient 等工具来为您生成代码。

9.脑叶白质切除猫头鹰选择器

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

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

登录后复制

此选择器针对直接跟随另一个元素的任何元素，添加上边距。这是在布局中保持垂直节奏的好方法，而无需向每个元素添加边距类。

小心这个！虽然它功能强大，但如果使用不当，也可能会产生意想不到的后果。考虑在特定容器上而不是全局上使用它。

10. 用于轻松主题化的 CSS 变量

最后但并非最不重要的一点是，我们来谈谈 CSS 变量（也称为自定义属性）。它们是创建灵活的主题设计的游戏规则改变者：

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

登录后复制

通过在 :root 伪类中定义变量，您可以在整个样式表中重用这些值。需要改变你的原色吗？只需更新一次变量，它就会在您的整个设计中传播。

把它们放在一起：一个现实世界的例子

现在我们已经介绍了这些很棒的 CSS 片段，让我们看看如何在现实场景中一起使用其中一些片段。想象一下我们正在为博客文章预览构建一个简单的卡片组件：

html {
  scroll-behavior: smooth;
}

登录后复制

这是用于设置其样式的 CSS，其中包含我们的几个片段：

document.documentElement.style.scrollBehavior = 'smooth';

登录后复制

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

结论：提升你的 CSS 游戏水平

好了，伙计们，10 个小而强大的 CSS 代码片段可以对您的开发工作流程产生巨大影响。从解决常见的布局挑战到添加一些细微的修饰，这些片段展示了 CSS 的强大功能和灵活性。

请记住，成为 CSS 向导的关键不仅仅是了解这些技巧 - 还在于了解何时以及如何使用它们。当您将这些片段合并到您的项目中时，请花时间进行实验并了解它们的工作原理。不要害怕调整和组合它们以满足您的特定需求。

在继续 CSS 之旅时，请记住以下一些最后提示：

保持好奇心：CSS 的世界总是在不断发展。密切关注可以增强您的工具包的新属性和技术。
练习，练习，再练习：这些片段使用得越多，它们就会变得越直观。
阅读规格：如有疑问，请直接查看来源。官方 CSS 规范可以提供有关属性如何工作的宝贵见解。
分享您的知识：发现了一个很酷的 CSS 技巧？与其他开发人员分享！ Web 开发社区因共享知识和经验而蓬勃发展。

那么，你还在等什么？启动您最喜欢的代码编辑器并开始使用这些片段。您的样式表（以及未来的您）将会感谢您！

祝您编码愉快，愿您的 CSS 始终没有错误且美观！

以上是每个 UI 开发人员都应该知道的 CSS 代码片段的详细内容。更多信息请关注PHP中文网其他相关文章！