无论你是刚开始接触 CSS 还是有很多使用它的经验，你都必须承认有很多 CSS 属性。而在那片汪洋大海中，很容易迷茫。你正在从 StackOverflow 复制和粘贴代码，直到发现一个有效的代码。但这将如何在更大范围内发挥作用？为什么它首先起作用？大多数时候，你会为答案而担忧。你只需专注于最终产品。一些 CSS 功能在构建网站时很重要，但它们很难被发现。本文旨在帮助你解决在开发网站时可能遇到的最常见的 CSS 问题。让我们来看看你不能忽略的某些属性。
1. display：flex；
是否有必要将元素居中？
你可能会通过谷歌搜索找到数十种替代答案；但是，大多数情况下你只需要一个。
.your-class-name {
display: flex;
justify-content: center;
align-items: center;
}display：flex；将一个接一个地在水平行中对齐您的子元素。要使其成为垂直行，请添加 flex-direction: column; 到代码的末尾。
你的主轴由 flex-direction 定义。行是默认值。
如果你使用 justify-content: center;，则主轴上的元素将对齐。对于我们的代码示例，这表示项目将水平居中。
你的交叉轴由 align-items 定义，这意味着你的元素垂直居中。
这里可以传递很多属性，但我只强调一个： justify-content: space-between; 因此，行的开头或结尾将没有边距。
2.margin
此属性将确定某些元素之间的距离。
.your-class-name {
margin-top: 16px;
margin-right: 12px;
margin-bottom: 16px;
}
// shorthand
.your-class-name {
margin: 16px 12px;
}您可以使用 margin-top、margin-right 等直接将属性附加到边上，或者你可以使用单个边距属性来覆盖所有内容：
margin: {{ top }} {{ right }} {{ bottom }} {{ left }};如果省略 bottom，它将继承 top （查看我们的示例）！如果省略 left，它将继承 right。
3. padding
首次出现时，填充似乎与边距相似。
语法与边距相同，速记也相同。
那么，我们为什么需要它？
考虑一个物理手提箱的情况。你想记下这个案子。
但是，你不想从左上角开始写作。你应该稍微缩进你的内容。
填充将用于此。我们元素的内部受到填充的影响。
但是，如果你有两个彼此靠近的行李并希望在它们之间留出空间，则可以使用边距。
4. background-color
这是一个相对简单的方法，但它是必须的。此属性适用于大多数 HTML 组件。
background-color: blue;
background-color: #232323;
background-color: rgb(255, 255, 128);
background-color: rgba(255, 255, 128, 0.5);属性的范围可能从基本颜色名称到其 HEX 值和 RGB 值（甚至 HSL）。
RGBA 令人着迷，因为它允许您设置不透明度和颜色。你看到0.5了吗？这意味着将有 50% 的透明度。
5.color
颜色与背景颜色相似，不同之处在于它会影响文本的颜色。其他一切都一样，甚至是透明度。
6.opacity
但是我们可以让任何事情变得透明！
opacity: 0.1; // 10% visibility
opacity: 0.9; // 90% visibility
这对于禁用状态或有趣的效果很有用。
7.width
这是一个很难的问题。大多数时候你不想有固定的宽度。ni的设计应该适合移动设备，你可以使用边距和填充来实现。
但是，有时你必须得到修复。那么您想将图标的大小设置为 24 像素吗？
另外，看看这篇文章。缩小页面进行探索。你会注意到它并没有一路走来。
因为整个页面都包含 max-width 属性，所以就是这种情况。将其环绕在你的网站上是个好主意。
8. height
由于我们滚动方向的性质，高度比宽度容易得多。
但是，你应该尽可能少地使用预设高度。你可以执行此操作的一个地方是你的标题。
还存在所有其他限定符，例如 min-height 和 max-height。
9.cursor：pointer；
将鼠标悬停在此页面上的任何按钮上。你能看到光标是如何变成一只小手的吗？
对此的解释是游标：指针。只要能让他们做某事（按钮、链接等），就应该使用它。
10. font-size
这个易于使用并控制文本大小。如果你是一个完全的初学者，我建议坚持使用 px。
如果你想深入一点，看看 rem。简而言之，你以 px 为单位设置默认字体大小，所有其他字体都与该数字成比例。
例如，如果你的基础值为 16px，则 2rem 将为 32px。
11. font-family
你是否正在寻找各种字体？Google Fonts 很棒，选择一个，将它包含在您的 index.html 中，并将其名称添加到 font-family 中是轻而易举的。
12.：hover
这将在悬停时为某个元素添加任何效果。
.your-class-name:hover {
cursor: pointer;
}
我们的示例将光标更改为指针。
结论
如果我告诉你，你会用这 12 个属性解决大部分 CSS 问题呢？
当然，根据你的情况，你可能需要更多，或者你需要更深入地研究其中一些。
但这足以构建一个外观稳固的网站。
