尝试在通用(*)选择器上应用的一些有趣/有用的方法

Paul Irish 最近 发表了一篇博文，介绍如何使用通用选择器为所有元素设置border-box box-sizing

* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

我一直想尝试一下，我很高兴地说我已经在几个项目中使用了它，并且效果非常好。 它也让我思考还有哪些其他属性可以类似地应用于页面上的所有元素。

过渡

* {
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}

如果您使用的是桌面浏览器，请立即试一试。 打开浏览器的开发者工具并添加一个新的 CSS 规则。 我碰巧在使用 Chrome，所以

我刚刚在撰写此文的 WordPress 仪表板中尝试了一下，感觉非常有趣，尤其是在侧边导航中。 性能肯定是一个需要关注的问题，所以我并不完全提倡现在就使用它，但玩玩还是很有趣的。 当页面上的所有元素都具有快速且相同的过渡时，我发现它有一种不错、柔和、舒适的感觉。

非重复背景

我敢打赌，总的来说，您设置背景为no-repeat的次数要多于实际让它们重复的次数。

* {
  background-repeat: no-repeat;
}

这样您就可以

.logo {
  background-image: url(logo.png);
}

无需担心您设置的图像会重复并变得奇怪，即使容器略大于徽标。 您也不必使用背景的简写形式，该形式会设置/重置background-color、background-attachment和background-position，无论您是否需要。

我知道 Estelle Weyl 是粉丝。=)

相对定位

* {
  position: relative;
}

如果所有元素都以相对定位开始，则意味着z-index“正常工作”，而不是默认静态定位元素忽略它的令人困惑的问题。 这也意味着更容易使用top、left、right和bottom调整元素位置，这些属性在相对定位元素上“正常工作”。 将其应用于现有布局可能很困难，但从头开始使用它应该不太难。

垂直居中对齐

* {
  vertical-align: middle;
}

我发现自己经常设置此值，尤其是在 使用图标 的项目中。 在我尝试应用它的大多数布局中，它不会产生太大影响，因为它只在内联或内联块元素在同一行上彼此对齐时才会出现。 本质上，我发现自己设置它的次数多于重置默认值，我认为这使其成为通用设置的良好候选者。