5 个可以帮你节省大量时间的 CSS 技巧

# Web 开发# CSS# HTML# 开发

对于后端开发人员来说，使用 CSS 一直是一场噩梦。这里让我们来对抗那些前端开发人员，并学习一些甚至前端开发人员都不知道的 CSS 技巧。

1. Flexbox 中的居中技巧

让我们从著名的居中 div 问题开始。在这里我们将使用弹性框。无需设置绝对定位或使用边距，请执行以下操作：

.flex-center-demo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
Image description

2. 快速网格自动放置

如果您正在设计导航栏或仪表板，您将需要它。如果您有一些项目集合，并且需要将它们放在一起，那么请使用它。

.auto-grid-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

它会自动用最小宽度为 120px 的框填充行。

Image description

3. 相邻兄弟选择器

当您有相邻元素（位于标题之后的元素，例如标题下方的作者姓名）时这很有用。

h2 + p {
    font-style: italic;
    color: blue;
  }

以下是一张图片：

Image description

4. 使用伪类 not()

例如，当您设计某个元素时，需要对某个元素进行不同的设计，然后使用它。下面是一个框集合的示例，除属于“特殊”类的第三个框外，应用 CSS。

.box:not(.special) {
    background-color: #3498db;
    color: #fff;
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 4px;
  }
Image description

5. 像专业人士一样制作 CSS 动画

第一次正确获取 CSS 动画有点困难，使用这些关键帧将复杂的动画简化为易于调整或重用的单一规则。

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-demo {
  animation: fadeIn 3s forwards;
  background-color: #e67e22;
  color: #fff;
  padding: 1rem;
  text-align: center;
  border-radius: 4px;
}

额外提示！

以下是我经常使用的 CSS 调试技巧。如果您认为 CSS 搞乱了，但又不知道哪里出了问题，请尝试在每个元素周围加上这些框。这对我来说在调试 CSS 时非常有用。

/* Debug: Outline every element with a red border */
* {
  outline: 1px solid red !important;
}
Image description