每个 UI 开发人员都应该知道的 10 个 CSS 代码片段
阅读：33
点赞：0
一. 引言
大家好，UI 开发者们！准备好为你的样式表增添一些活力了吗？CSS 功能强大，但有时让人觉得难以驾驭。为此，我整理了 10 个小而强大的 CSS 代码片段，帮助你提升工作效率，让设计更加出色。无论你是新手还是老手，这里总有适合你的技巧。
二. 魔法居中技巧
尝试将一个 div 同时垂直和水平居中时，往往会遇到麻烦。以下代码将解决这个问题：
.center-me {
position: absolute; /* 将元素设为绝对定位 */
top: 50%; /* 上边距设为父容器的 50% */
left: 50%; /* 左边距设为父容器的 50% */
transform: translate(-50%, -50%); /* 向左和向上移动一半宽度和高度 */
}
使用该代码，元素将完美居中，告别繁琐的边距调整！
三. 平滑滚动效果
想让页面导航更加优雅？试试这个简单的代码：
html {
scroll-behavior: smooth; /* 启用平滑滚动 */
}
这使得滚动到锚点时更加流畅，提升用户体验。
提示
通过 JavaScript 自定义滚动速度：
document.documentElement.style.scrollBehavior = 'smooth'; /* 设置滚动行为为平滑 */
四. Clearfix 黑科技
处理浮动元素时，浮动常常会破坏布局。用以下代码解决问题：
.clearfix::after {
content: ""; /* 创建一个空内容 */
display: table; /* 显示为表格 */
clear: both; /* 清除浮动 */
}
将此类添加到含浮动子元素的容器中，恢复布局秩序。
五. 自定义滚动条
默认滚动条往往显得单调，用以下代码自定义滚动条样式：
::-webkit-scrollbar {
width: 10px; /* 设置滚动条宽度 */
}
::-webkit-scrollbar-track {
background: #f1f1f1; /* 设置轨道背景 */
}
::-webkit-scrollbar-thumb {
background: #888; /* 设置滑块颜色 */
}
::-webkit-scrollbar-thumb:hover {
background: #555; /* 鼠标悬停时改变颜色 */
}
自定义滚动条增强了网站的视觉效果。
六. Flexbox 居中
使用 Flexbox 快速居中内容，代码如下：
.flex-center {
display: flex; /* 启用 Flexbox 布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
将此类应用于容器，所有子元素都会完美居中。
七. 用省略号截断文本
为了在有限空间内显示文本并防止溢出，使用以下代码：
.truncate {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 使用省略号表示截断的文本 */
}
保持设计整洁，防止文本破坏布局。
八. CSS 三角形
用 CSS 创建三角形，无需图像：
.triangle {
width: 0; /* 宽度为 0 */
height: 0; /* 高度为 0 */
border-left: 25px solid transparent; /* 左边框透明 */
border-right: 25px solid transparent; /* 右边框透明 */
border-bottom: 50px solid #333; /* 下边框设置颜色 */
}
调整边框宽度和颜色，创建不同方向的三角形。
九. 渐变背景
为设计增添深度的简单线性渐变：
.gradient-bg {
background: linear-gradient(to right, #ff7e5f, #feb47b); /* 创建渐变背景 */
}
可调整颜色和方向，以适应不同需求。
十. Lobotomized Owl 选择器
使用这个选择器在元素间添加一致的间距：
* + * {
margin-top: 1.5em; /* 在每个元素上添加上边距 */
}
适合保持布局的垂直节奏，使用时需谨慎。
十一. CSS 变量
利用 CSS 变量轻松实现主题设置：
:root {
--primary-color: #007bff; /* 定义主色 */
--secondary-color: #6c757d; /* 定义次要颜色 */
--font-size: 16px; /* 定义字体大小 */
}
.button {
background-color: var(--primary-color); /* 使用变量设置背景色 */
font-size: var(--font-size); /* 使用变量设置字体大小 */
}
更新变量，即可在整个样式表中生效。
十二. 实际应用示例
结合上述技巧，构建一个博客文章卡片组件：
<div class="card">
<div class="card-image">
<img src="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.</p>
<a href="#" class="card-link">阅读更多</a>
</div>
</div>
以下是样式代码：
: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; /* 悬停时颜色变化 */
}
三.结论
以上就是 10 个小而强大的 CSS 技巧，它们可以极大地提升你的开发效率。掌握这些技巧，并理解其用法，将帮助你在设计中游刃有余。