在前端开发过程中，利用 CSS 一行代码技巧可以解决一些常见问题，提高编码效率，使样式设置更加简洁。今天将分享 10 个 CSS 一行代码技巧。
1. 居中对齐
居中对齐是 CSS 中的常见需求。通过一行 CSS 代码，可以实现元素的水平垂直居中。
display: grid; place-items: center;
2. 清除浮动
浮动元素可能会导致父元素的高度塌陷。这时，可以使用一行 CSS 代码来清除浮动，避免高度塌陷。
overflow: auto;
3. 文本溢出省略
当文本内容超出容器宽度时，可以通过一行 CSS 代码实现省略号显示，表示文本溢出。
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
4. 平滑滚动
为了提升用户体验，可以使用一行 CSS 代码实现页面的平滑滚动。
scroll-behavior: smooth;
5. 无序列表样式清除
无序列表默认带有点状样式，通过一行 CSS 代码可以清除这些默认样式。
list-style: none;
6. 图片响应式
为了适应不同屏幕尺寸，可以使用一行 CSS 代码使图片具有响应式。
img { max-width: 100%; height: auto; }
7. 禁止用户选择文本
在某些情况下，可能希望禁止用户选择页面上的文本。此时，可以使用一行 CSS 代码实现。
user-select: none;
8. 透明度设置
透明度设置是 CSS 中的常见操作。使用一行代码可以实现元素的透明度设置。
opacity: 0.5;
9. 边框盒模型
可以使用一行 CSS 代码设置所有元素的盒模型为边框盒模型，使得设置的宽度和高度包含内容、内边距和边框。
box-sizing: border-box;
10. 阴影效果
阴影效果可以增加元素的视觉效果。使用一行 CSS 代码可以为元素添加阴影。
box-shadow: 2px
2px 4px rgba(0, 0, 0, 0.5);
总结
以上就是 10 个 CSS 单行代码技巧，希望对日常开发有所帮助。
