精彩的 CSS 技巧和窍门

想知道如何运用现代 CSS 特性和一些令人惊叹的 CSS 技巧来编写简洁的代码吗？你来对地方了！

给初学者的建议

对于刚开始学习 CSS 的人来说，这里有个小建议——不要使用 Bootstrap 或 Tailwind！它们无疑是快速创建美观 UI 的好工具，但使用这些工具意味着你会失去 CSS 的基础知识。我本人就犯过这个错误，天哪，我后悔了。

网格很棒

与仅处理单个列和行的 Flexbox 不同，Grid 布局允许你考虑全局。当你设置一个元素时，display: grid;你可以将其子元素定义为一组列和行。看看下图中我们使用 grid 代替 Flexbox 节省的代码量。点击此处了解更多关于 CSS Grid 布局的信息

CSS 调试

我们经常使用 Chrome 开发者工具来调试代码（包括 CSS），但你会惊讶地发现，Firefox 开发者工具更加出色，尤其是在 CSS 方面。在 Firefox 中检查元素时，你会像在 Chrome 中一样看到盒模型的详细解析，但你也可以直接编辑其属性，例如更改填充或边距，它还会提供所有影响盒模型的属性的详细解析。不仅如此，Firefox 还为弹性和网格布局提供了非常漂亮的图形。

图像滤镜

用 CSS 处理图片很有趣，但你知道吗，我们可以为这些图片添加各种炫酷的效果。事实上，CSS 允许在图片上使用各种滤镜，帮助开发者在无需 Photoshop 修改的情况下轻松处理图片。让我们来看看其中一些滤镜：

.image img {
  max-width: 300px;
}

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

我还有很多内容想写出来并与大家分享，但是篇幅有点长，所以如果您想要“惊人的 CSS 技巧和窍门”第 2 部分，请在下方发表评论。

您可以在Twitter和LinkedIn上关注我。