10 个 CSS 1 行代码技巧

在前端开发过程中，利用 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 单行代码技巧，希望对日常开发有所帮助。