机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

CSS 专业技巧

一系列帮助提升你的 CSS 技能的技巧。

专业提示

1. 使用 CSS 重置
2. 继承 box-sizing
3. 使用 unset 而不是重置所有属性
4. 使用 :not() 在导航上应用/取消应用边框
5. 检查字体是否已本地安装
6. 为 body 添加 line-height
7. 为表单元素设置 :focus
8. 垂直居中任何元素
9. 使用 aspect-ratio 而不是 高度/宽度
10. 逗号分隔列表
11. 使用负 nth-child 选择项目
12. 使用 SVG 图标
13. 使用 “Lobotomized Owl” 选择器
14. 为纯 CSS 滑块使用 max-height
15. 等宽表格单元格
16. 使用 Flexbox 去掉边距技巧
17. 对空链接使用属性选择器
18. 使用 :is() 更好地控制特异性
19. 样式化 “默认” 链接
20. 固有比例盒子
21. 样式损坏的图片
22. 使用 rem 进行全局大小设置；使用 em 进行局部大小设置
23. 隐藏未静音的自动播放视频
24. 使用 :root 实现灵活字体
25. 在表单元素上设置 font-size 以提升移动体验
26. 使用指针事件控制鼠标事件
27. 对用作间距的换行符设置 display: none
28. 使用 :empty 隐藏空的 HTML 元素
29. 使用 margin-inline 替代 margin

使用 CSS 重置

CSS 重置有助于在不同浏览器中保持样式一致性，为元素的样式提供一个干净的起点。你可以找到许多重置模式，或者使用更简化的重置方法：

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

现在元素将去除边距和内边距，box-sizing 让你可以使用 CSS 盒模型管理布局。

演示

[!提示]
如果你遵循下面的 继承 box-sizing 提示，你可能会选择在 CSS 重置中不包含 box-sizing 属性。

^返回顶部

Inherit box-sizing

让 box-sizing 从 html 继承：

html {
  box-sizing: border-box;
}

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

这使得在使用其他行为的插件或其他组件中更容易更改 box-sizing。

演示

^回到顶部

使用 unset 而不是重置所有属性

在重置元素的属性时，没有必要重置每个单独的属性：

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

您可以使用 all 简写指定元素的所有属性。将值设置为 unset 会将元素的属性更改为其初始值：

button {
  all: unset;
}

^返回顶部

使用 :not() 对导航应用/取消边框

不是添加边框…

/* add border */
.nav li {
  border-right: 1px solid #666;
}

...然后从最后一个元素上取下它...

/* remove border */
.nav li:last-child {
  border-right: none;
}

...使用 :not() 伪类仅应用于你想要的元素：

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

在这里，CSS选择器的读取方式就像人类描述它一样。

演示

^返回顶部

检查字体是否已在本地安装

您可以在远程获取字体之前检查字体是否已在本地安装，这也是一个很好的性能提示。

@font-face {
  font-family: "Dank Mono";
  src:
    /* Full name */
    local("Dank Mono"),
    /* Postscript name */ local("Dank Mono"),
    /* Otherwise, download it! */ url("//...a.server/fonts/DankMono.woff");
}

code {
  font-family: "Dank Mono", system-ui-monospace;
}

感谢 Adam Argyle 分享这个专业技巧和 演示。

^返回顶部

在 body 中添加 line-height

你不需要分别将 line-height 添加到每个 <p>、<h*> 等中。相反，将它添加到 body 就可以了：

body {
  line-height: 1.5;
}

这样，文本元素可以轻松继承 body。

演示

^返回顶部

为表单元素设置 :focus。

有视力的键盘用户依赖焦点来确定键盘事件在页面中的位置。让表单元素的焦点比浏览器的默认实现更突出和一致：

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: 0.05em;
}

演示

^返回顶部

垂直居中任何东西

不，这不是黑魔法，你真的可以将元素垂直居中。你可以用 flexbox 做到这一点...

html,
body {
  height: 100%;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
}

...而且还可以使用 CSS Grid：

body {
  display: grid;
  height: 100vh;
  place-items: center;
}

[!提示]
想要居中其他内容吗？垂直、水平……任何地方，任何时间，任何内容？CSS-Tricks 有一篇不错的文章介绍了如何做到这些。

演示

^回到顶部

使用 aspect-ratio 替代 高度/宽度

aspect-ratio 属性可以让你轻松调整元素大小并保持一致的宽高比。在响应式网页设计中，这非常有用，可以防止布局偏移。与 object-fit 一起使用可以防止在图像的高度/宽度值变化时破坏布局。

img {
  aspect-ratio: 16 / 9; /* width / height */
  object-fit: cover;
}

在这篇 web.dev 文章 中了解更多关于 aspect-ratio 属性的信息。

演示

^返回顶部

逗号分隔列表

让列表项看起来像真正的逗号分隔列表：

ul > li:not(:last-child)::after {
  content: ",";
}

使用 :not() 伪类，最后一项不会添加逗号。

[!注意]
此提示在可访问性方面可能不理想，尤其是屏幕阅读器。此外，从浏览器复制/粘贴无法用于 CSS 生成的内容。请谨慎操作。

^回到顶部

使用负的 nth-child 选择项目

在 CSS 中使用负的 nth-child 来选择第 1 到第 n 项。

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n + 3) {
  display: block;
}

或者，既然你已经学会了一些关于使用 :not()的知识，试试：

/* select all items except the first 3 and display them */
li:not(:nth-child(-n + 3)) {
  display: block;
}

演示

^回到顶部

图标使用 SVG

没有理由不使用 SVG 来作为图标：

.logo {
  background: url("logo.svg");
}

SVG 对所有分辨率类型的缩放表现良好，并且所有浏览器都支持 回到 IE9。放弃你的 .png、.jpg 或 .gif-jif-whatev 文件。

[！注意]
如果你有仅用于有视觉能力用户的 SVG 图标按钮，并且 SVG 加载失败，这将有助于保持可访问性：

.no-svg .icon-only::after {
  content: attr(aria-label);
}

^返回顶部

使用“切除脑的猫头鹰”选择器

它的名字可能很奇怪，但使用通用选择器（*）与相邻兄弟选择器（+）可以提供强大的 CSS 功能：

* + * {
  margin-top: 1.5em;
}

在此示例中，文档流程中跟随其他元素的所有元素将接收 margin-top: 1.5em。

[!提示]
有关“去脑猫头鹰”选择器的更多信息，请阅读 Heydon Pickering 的文章，发表于 A List Apart。

演示

^返回顶部

将 max-height 用于纯 CSS 滑块

使用 max-height 并结合隐藏溢出，实现纯 CSS 滑块:

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

当鼠标悬停时，该元素会扩展为 max-height 值，并且由于溢出，滑块会显示出来。

^返回顶部

等宽表格单元格

表格可能很难操作。尝试使用 table-layout: fixed 来保持单元格等宽：

.calendar {
  table-layout: fixed;
}

无痛的表格布局。

演示

^回到顶部

使用 Flexbox 摆脱边距黑客技巧

在处理列间距时，你可以通过使用 Flexbox 的 space-between 属性来摆脱 nth-、first- 和 last-child 黑客技巧：

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

现在列间距总是均匀分布。

^返回顶部

对空链接使用属性选择器

当 <a> 元素没有文本值但 href 属性有链接时显示链接：

a[href^="http"]:empty::before {
  content: attr(href);
}

这真的很方便。

演示

[!注意]
此提示可能不适合无障碍使用，特别是屏幕阅读器。而且从浏览器复制/粘贴无法用于由 CSS 生成的内容。请谨慎操作。

^回到顶部

使用 :is() 更好地控制特异性

:is() 伪类用于同时定位多个选择器，减少冗余并增强代码可读性。这对于以更紧凑的形式编写大型选择器非常有用。

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: green;
}

上述规则集等同于以下号码选择规则...

section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
aside h1,
aside h2,
aside h3,
aside h4,
aside h5,
aside h6,
nav h1,
nav h2,
nav h3,
nav h4,
nav h5,
nav h6 {
  color: green;
}

演示

^返回顶部

样式“默认”链接

为“默认”链接添加样式：

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

现在，通过 CMS 插入的链接，通常没有 class 属性，将会有一个区分，而不会普遍影响层叠。

^返回顶部

内在比例盒

要创建一个具有内在比例的盒子，你所需要做的就是对一个 div 应用顶部或底部填充：

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

使用 20% 作为内边距会使盒子的高度等于其宽度的 20%。无论视口宽度如何，子 div 都会保持其宽高比（100% / 20% = 5:1）。

演示

^回到顶部

样式化损坏的图片

用一些 CSS 让损坏的图片看起来更美观：

img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

现在添加伪元素规则以显示用户消息和损坏图片的 URL 引用：

img::before {
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

[!提示]
在 Ire Aderinokun 的文章 中了解有关此模式样式的更多信息。

^回到顶部

使用 rem 进行全局尺寸；使用 em 进行局部尺寸

在根设置基本字体大小（html { font-size: 100%; }）之后，为文本元素设置字体大小为 em：

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

然后将模块的字体大小设置为 rem：

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: 0.9rem;
}

现在，每个模块都变得独立且更容易进行样式化，更易维护且灵活。

^返回顶部

隐藏未静音的自动播放视频

这是为自定义用户样式表提供的一个绝佳技巧。避免在页面加载时自动播放带声音的视频而使用户感到困扰。如果声音未静音，则不要显示视频：

video[autoplay]:not([muted]) {
  display: none;
}

我们再次利用了 :not() 伪类。

^返回顶部

使用 :root 来实现灵活的字体

响应式布局中的字体大小应该能够随每个视口调整。你可以使用 :root 根据视口高度和宽度计算字体大小：

:root {
  font-size: calc(1vw + 1vh + 0.5vmin);
}

现在你可以基于 :root 计算的数值来使用 root em 单元：

body {
  font: 1rem/1.6 sans-serif;
}

演示

^回到顶部

在表单元素上设置 font-size 以获得更好的移动体验

为了避免移动浏览器（iOS Safari 等）在点击 <select> 下拉菜单时放大 HTML 表单元素，请将 font-size 添加到选择器规则中：

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

^返回顶部

使用指针事件控制鼠标事件

指针事件 允许你指定鼠标如何与其接触的元素互动。例如，要禁用按钮上的默认指针事件：

button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

就是这么简单。

^返回顶部

在“换行用作间距”上设置 display: none

正如 Harry Roberts 指出 的，这可以帮助防止 CMS 用户为了间距而使用额外的换行符：

br + br {
  display: none;
}

^返回顶部

使用 :empty 隐藏空的 HTML 元素

如果你有 HTML 元素是空的，即内容尚未通过 CMS 设置或动态注入（例如 <p class="error-message"></p>），并且它在你的布局上产生了不必要的空白空间，使用 :empty 伪类在布局上隐藏该元素。

:empty {
  display: none;
}

[!注意]
请记住，包含空格的元素不被视为空，例如，<p class="error-message"> </p>。

^回到顶部

支持

当前版本的 Chrome、Firefox、Safari 和 Edge。

^返回顶部

使用 margin-inline 替代 margin

margin-inline 定义了元素的行内起始和结束边距。因此，我们可以使用行内属性来定义两者，而不是使用 margin-left 和 margin-right。

.div {
  margin-inline: auto;
}

对于 margin-block 也可以执行相同操作，它定义了块的开始和结束边距，即 margin-top 和 margin-bottom。

.div {
  margin-block: auto;
}

演示

^返回顶部

翻译

[!注意]
我可用于维护不断增长的翻译提示列表的时间减少了；添加一个新提示需要将其包含在十几种翻译中。因此，翻译后的 README 文件可能不会包含主 README 文件中列出的所有提示。

^回到顶部