最近在学习小程序，没想到学了一堆css的小技巧，虽然说是小技巧，但感觉应该也都是前端开发的基础知识，作为后端开发出身的我，感受受益良多，特此记录一下。
一、文本处理技巧
「1. 单行文本截断省略号」
.truncate {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
应用场景：表格单元格、卡片标题等需要限制长度的文本展示。
「2. 多行文本截断（WebKit 内核）」
.multiline-truncate {
display: -webkit-box;
-webkit-line-clamp: 3; /* 限制显示行数 */
-webkit-box-orient: vertical;
overflow: hidden;
}
二、布局与定位技巧
「1. 居中布局三件套」
.centered {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
「2. 绝对定位居中」
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
「3. 精确选择最后一个子元素」
.container > div:last-child {
border-bottom: none; /* 移除最后一项的下边框 */
}
三、视觉特效技巧
「1. 毛玻璃效果」
.frosted-glass {
background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
backdrop-filter: blur(20rpx); /* 背景模糊效果 */
}
「2. 多层渐变背景」
.gradient-bg {
background:
linear-gradient(to bottom, transparent, #fff 400rpx),
linear-gradient(to right, #beecd8 20%, #F4E2D8);
}
效果解析：上层：垂直渐变，顶部透明到底部白色 底层：水平渐变，左侧薄荷绿到右侧浅杏色
四、特殊状态处理
「1. 保留空间隐藏元素」
.invisible {
opacity: 0; /* 元素透明但保留空间 */
}
「2. 完全隐藏元素」
.hidden {
display: none; /* 元素隐藏且不占空间 */
}
五、优先级与作用域管理
「1. 强制提升样式优先级」
.override {
color: red !important; /* 强制覆盖其他样式 */
}
慎用提示：过度使用!important 会导致样式难以维护
「2. 穿透组件样式作用域」
:deep(.child-component) {
/* 样式将穿透作用域影响子组件 */
}
适用场景：在 Vue/Scoped CSS 环境中定制第三方组件样式
六、响应式设计技巧
「1. 移动端优先的响应式断点」
/* 默认移动端样式 */
.container {
padding: 16rpx;
}
/* 平板及以上 */
@media (min-width: 768px) {
.container {
padding: 24rpx;
}
}
/* 桌面端 */
@media (min-width: 1024px) {
.container {
padding: 32rpx;
}
}
「2. 图片自适应容器」
.responsive-img {
max-width: 100%;
height: auto;
display: block;
}
七、性能优化技巧
「1. 使用 CSS 变量提升维护性」
:root {
--primary-color: #4285f4;
--secondary-color: #34a853;
}
.button {
background-color: var(--primary-color);
}
.button:hover {
background-color: var(--secondary-color);
}
「2. 避免不必要的重绘」
.optimized {
will-change: transform; /* 提示浏览器元素可能变化 */
transform: translateZ(0); /* 触发GPU加速 */
}
八、实用函数与计算
「1. 使用 calc()进行动态计算」
.dynamic-width {
width: calc(100% - 60px);
}
「2. min()与 max()函数」
.responsive-element {
width: min(100%, 1200px);
height: max(200px, 30vh);
}
总结
掌握这些 CSS 小技巧能显著提升开发效率：
- 布局与定位：Flex 居中、绝对定位居中
- 文本处理：单行/多行省略号
- 视觉效果：渐变背景、毛玻璃效果
- 状态管理：保留空间隐藏、穿透作用域
- 响应式设计：媒体查询、自适应图片
- 性能优化：CSS 变量、减少重绘
将这些技巧融入日常开发，不仅能提升工作效率，还能创建出更优雅、更易维护的样式代码。根据实际场景灵活运用，可以解决大多数前端样式挑战！
