5 个实用的 CSS 小技巧

每个开发者都会遇到 CSS 中一些恼人的小问题。它们可能会让你绞尽脑汁好几天，不明白为什么你的元素背景是紫色的，而且它还位于左下角。这类 CSS 问题会让你感到沮丧，尤其是当它是唯一阻碍你前进的原因时。

当然，这些小怪癖还有很多，我无法一一列举，但这里有 5 个我遇到的比我希望的更多的怪癖。

• 一行文本的垂直对齐。
  • 几乎每次我尝试制作导航菜单时，都会出现这个问题。其实诀窍比我愿意承认的要简单得多。如果你把菜单的高度设为与文本的行高相同，就不会出现多余的空格或字母看起来偏移的问题。它看起来应该像这样：

.nav-element {
    height: 24px;
    line-height: 24px
}

• 确保图像调整大小时不会失真。
  • 有时，您会收到一些比例奇怪的图片，您需要让它无论在什么屏幕尺寸上都保持这些比例。您可以通过将最大宽度设置为 100%，并将高度设置为自动来实现。这样做的目的是防止图片在较小的设备上溢出，并根据宽度计算图片的高度。现在您不必再担心图片看起来被拉伸或挤压了。您可以使用以下简单的方法来实现：

img {
    height: auto;
    max-width: 100%;
}

• 重置所有浏览器默认样式。

  • 如果某个元素无论你用 CSS 怎么修改都始终出错，浏览器可能会覆盖你的样式。浏览器预设了边距、填充、边框和其他一些设置。这些设置可能会严重扰乱你的布局。好在市面上有很多 CSS 重置工具，你可以选择自己喜欢的。CSS 重置工具会移除所有浏览器样式，让你在每个浏览器上都能重新设置。这是我在我的网站上使用的重置工具，也是最知名的重置工具之一：https://meyerweb.com/eric/tools/css/reset/reset.css

• 覆盖样式。

  • 这里需要提醒您，这项技术应该只在真正需要时使用。否则，以后更新样式时，可能会造成混乱和麻烦。不过，如果您希望某个样式优先于所有其他样式，可以使用此!important规则。您可以将此规则添加到任何 CSS 属性中，它将始终优先于所有其他样式。这就是为什么您只在真正需要时才使用它。如果每个样式都“重要”，那么 CSS 的层叠流程就会被打断，样式的应用逻辑也就失去了意义。实际使用时，效果如下：

p {
    font-size: 24px !important;
}

• 获得正确的垂直屏幕高度。
  • 您是否曾想过用特定元素或元素类别填满整个屏幕？您可以使用视图高度这一测量单位来实现。其工作原理是，将元素的高度设置为您希望其占屏幕的百分比。您需要记住的一点是，在不同尺寸的屏幕上，填充将如何进行。以下是使用视图高度的方法：

.screen-fill {
    height: 75vh;
}

希望这些 CSS 小技巧能帮助你开发得更好或更快一些。除了元素居中的问题之外，这些技巧只是触及皮毛。

谢谢阅读！:)

嘿！你应该在 Twitter 上关注我，理由如下：https://twitter.com/FlippedCoding