构建网站所需了解的所有 CSS 属性

无论您是刚开始学习 CSS 还是已经处于其他阶段，您都必须承认 - CSS 属性的数量是巨大的。

在那茫茫的海洋中，你很容易迷失自己。 

你一直在从 StackOverflow 复制代码，直到找到合适的解决方案。但这如何扩展？它为什么有效？

很多时候，你并不关心答案，你只关注结果。

在构建网站时，一些 CSS 属性是必需的；然而，却很难识别它们。 

本文旨在帮助您解决构建网站时最常见的 CSS 问题。

让我们深入了解一下您无法避免的属性。

1. 显示：弹性；

您需要将元素居中吗？

通过谷歌搜索可能会提供数十种不同的解决方案；然而，大多数时候你只需要一种。

.your-class-name {
  display: flex;
  justify-content: center;
  align-items: center;
}

display: flex;会使您的子元素水平排列。提示：您可以添加flex-direction: column;将其更改为垂直排列。

flex-direction确定主轴。默认值为row。

justify-content: center;将会使项目在主轴上对齐。这意味着在我们的代码片段中，项目将水平居中。

align-items控制你的横轴，即你的元素垂直居中。

您可以在此处传递许多属性，但我只提到一个：justify-content: space-between;。这将把元素分布在行中，开头和结尾没有任何边距。

2. 保证金

此属性将决定某些元素之间的距离。

.your-class-name {
  margin-top: 16px;
  margin-right: 12px;
  margin-bottom: 16px;
} 
// shorthand
.your-class-name {
  margin: 16px 12px;
}

margin-top您可以通过执行、等操作直接将属性与边连接起来margin-right，或者用一个margin属性覆盖所有内容：

margin: {{ top }} {{ right }} {{ bottom }} {{ left }};

如果省略bottom，它将继承top（查看我们的示例）！如果省略left，它将继承right。

3. 填充

乍一看，padding看起来很相似margin。 

语法也相同margin；简写也相同。

那我们为什么需要它呢？

想象一下，你有一个实体的手提箱，你想在箱子上写点东西。

但是，您不想从左上角开始书写。您想稍微缩进一下文本。

为此，您将使用padding。填充会影响元素的内部。

但是，如果您有两个行李箱并排放置，并且您想在它们之间留出一段距离，那么您就会使用margin它。 

4. 背景颜色

这个非常简单，但绝对必要。你可以将此属性应用于大多数 HTML 元素。

background-color: blue;
background-color: #232323;
background-color: rgb(255, 255, 128);
background-color: rgba(255, 255, 128, 0.5);

属性可以变化：从简单的颜色名称，到其十六进制值，再到 RGB（甚至 HSL）。

RGBA 在这里很有意思，因为除了设置颜色之外，你还可以设置不透明度。看到 0.5 了吗？这意味着透明度为 50%。

5. 颜色

color与 类似background-color；唯一的区别在于它会影响文本的颜色。其他方面都相同，包括透明度。

6.不透明度

但我们可以让一切变得透明！

opacity: 0.1; // 10% visibility
opacity: 0.9; // 90% visibility

这对于禁用状态或有趣的效果很有用。

7.宽度

这个问题比较棘手。大多数情况下，你不希望使用固定宽度。你的设计应该具有响应式，你可以使用边距和填充来实现这一点。

但是，有时你需要修复。也许你想将图标设置为24px？

或者看看这篇文章。试着缩小页面。你会发现它无法从一端移动到另一端。

这是因为整个页面都有max-width属性。用它来包装你的网站很有用。

8. 高度 

height由于滚动方向的性质，比宽度简单得多。

但是，你仍然希望尽可能少地使用固定高度。标题就是一个可以这样的例子。

所有其他警告也都类似min-height且max-height存在于此。

9. 光标：指针；

将鼠标悬停在此页面上的任意按钮上。你能看到光标变成一只小手吗？

cursor: pointer;就是这个原因。只要你能触发任何操作（按钮、链接等等），你就需要使用它。

10. 字体大小

这个很简单，用来控制字体大小。如果你是新手，我建议只用px这个。

但是，如果您想深入了解，请调查一下rem。基本上，您在中设置默认字体大小px，所有其他字体都将相对于该基准值。

例如，如果您的基准值为16px，2rem则将为32px。

11. 字体系列

你想要不同的字体，对吧？Google 字体令人印象深刻，你可以轻松地从中挑选一种字体，将其添加到你的index.html，并将其名称添加到font-family。

12. :hover

这将在悬停时向某个元素添加任何效果。

.your-class-name:hover {
  cursor: pointer;
}

我们的示例将把光标更改为指针。

结论

如果我告诉您，您可以使用这 12 个属性解决大多数 CSS 问题，您会怎么想？

当然，根据您的情况，您可能需要更多，或者您需要更深入地研究其中的一些。

但这足以建立一个看起来可靠的网站。

请查看最初在 Medium 上发表的文章底部，了解最佳 CSS 课程！