我常用的 10 个 CSS 一行代码技巧

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

在 CSS 开发中，一些简单的一行代码往往可以让你的页面变得更加优雅高效。以下是 10 个我喜欢使用的 CSS 一行代码，它们不仅简洁，还能在实际项目中起到很大的作用。

---

1. 设置宽高比例（Aspect Ratio）

通过 aspect-ratio 属性，可以根据指定的宽度自动调整高度（反之亦然）。

.box {
  width: 90%;
  aspect-ratio: 16/9;
}

适合用在视频播放器或图片容器中，确保它们以正确的比例呈现。

---

2. 逻辑属性（Logical Properties）

使用 margin-block 和 margin-inline 替代传统的 margin-top、margin-right 等，更加简洁直观。

.box {
  margin-block: 5px 10px;    /* 上边距 5px，下边距 10px */
  margin-inline: 20px 30px;  /* 左边距 20px，右边距 30px */
}

对于 padding 也是一样的：

.box {
  padding-block: 10px 20px;  /* 上下内边距 */
  padding-inline: 15px 25px; /* 左右内边距 */
}

这些属性会自动适配文本方向（如从左到右或从右到左）。

---

3. 全局盒模型设置

避免因默认 box-sizing 属性引起的布局问题，通过以下一行代码可以让所有元素包含其内边距和边框：

*, *::before, *::after {
    box-sizing: border-box;
}

这可以大幅减少布局错误，让开发更加省心。

---

4. 平滑滚动（Smooth Scroll）

为整页启用平滑滚动，提升用户体验：

html {
    scroll-behavior: smooth;
}

在单页网站或锚点导航中尤为实用。

---

5. 垂直书写模式（Vertical Writing Mode）

让文字从右向左垂直排列，可用于特殊设计场景或支持垂直书写的语言：

.vertical-text {
    writing-mode: vertical-rl;
}

---

6. 文本溢出省略号（Truncating Text with Ellipsis）

对于超出容器的长文本，可以用省略号代替多余部分：

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

适合用在标题、卡片或链接预览中。

---

7. 居中对齐（Place-items）

使用 place-items 快速实现网格容器的水平和垂直居中对齐：

.box {
  display: grid;
  place-items: center;
}

---

8. 限制文本宽度（Limit Text Width）

通过限制每行文本的最大字符数，提升可读性：

p {
  max-width: 100ch;
}

“ch” 单位表示一个字符的宽度，非常适合用于段落样式。

---

9. 占位符样式（Styling Placeholder Text）

给输入框的占位符文本添加样式：

::placeholder {
    color: #999;
    font-style: italic;
}

---

10. 统一的强调色（Accent Color）

通过 accent-color 为交互元素（如按钮、复选框）设置统一的主题颜色：

body {
  accent-color: green;
}

可以在整个网站中保持一致的视觉风格，而无需单独为每个元素定义样式。

---

总结

这些 CSS 一行代码涵盖了布局优化、用户体验提升和样式统一等多个方面，既实用又高效。将它们融入你的日常工作流，可以让项目的开发更加轻松，同时大幅提升代码的质量和可维护性。

试试这些技巧，感受它们带来的改变吧！

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。