快看！10个值得收藏的CSS实用小技巧

本篇文章给大家分享10个很棒的css使用技巧，让前端开发更轻松，快来收藏吧，希望对大家有所帮助！

我会为你带来 10 个很棒的 CSS 技巧，它们会让你作为开发人员更轻松，特别是如果你是初学者。（推荐学习：css视频教程）

1.如何在CSS中修复网页上的水平滚动

如果你在设置网页样式并且在底部看到水平滚动条，则需要找到宽度大于可用屏幕宽度的元素。

例如，在下面的屏幕截图中，你可以看到有一个水平滚动：

立即学习“前端免费学习笔记（深入）”；

你可以使用通用选择器 (*) 通过应用以下规则来查找罪魁祸首元素：

* {      border: 2px solid red;}

这会将 2 像素的红色边框应用于页面上的每个元素，因此你可以轻松找出需要调整的元素。

应用上述样式后，结果如下：

你可以看到第二个绿色波浪正在导致水平滚动。这是因为宽度设置为 1400 像素，比 1200 像素的可用屏幕宽度更宽。

.wave2 {  width: 1400px;}

将宽度设置回 1200 像素或将其完全删除将解决问题，因此不再有水平滚动。

2. 如何在 CSS 中覆盖样式

在某些特定情况下，你可能希望覆盖已经存在的特定样式（例如来自库）。或者，你可能有一个带有大型样式表的模板，你需要自定义其中的特定部分。

在这些情况下，您可以应用 CSS specificity 的规则，!important也可以在规则前面使用异常。

在下面的示例中，!important为每个 h1 元素提供#2ecc71（我最喜欢的颜色）的翠绿色变体：

h1 {    color: #2ecc71 !important;}

但要注意——使用这个异常被认为是不好的做法，你应该尽可能避免它。

为什么？嗯，!important实际上破坏了 CSS 的级联特性，它会使调试变得更加困难。

最好的用例!important是在处理大量模板样式表或旧代码时，使用它来识别代码库中的问题。然后你可以快速修复问题并消除异常。

除了使用 !important 来应用样式之外，您还可以了解