無(wú)論你是剛開始接觸 CSS 還是有很多使用它的經(jīng)驗(yàn)，你都必須承認(rèn)有很多 CSS 屬性。而在那片汪洋大海中，很容易迷茫。你正在從 StackOverflow 復(fù)制和粘貼代碼，直到發(fā)現(xiàn)一個(gè)有效的代碼。但這將如何在更大范圍內(nèi)發(fā)揮作用？為什么它首先起作用？大多數(shù)時(shí)候，你會(huì)為答案而擔(dān)憂。你只需專注于最終產(chǎn)品。一些 CSS 功能在構(gòu)建網(wǎng)站時(shí)很重要，但它們很難被發(fā)現(xiàn)。本文旨在幫助你解決在開發(fā)網(wǎng)站時(shí)可能遇到的最常見的 CSS 問題。讓我們來(lái)看看你不能忽略的某些屬性。
1. display：flex；
是否有必要將元素居中？
你可能會(huì)通過谷歌搜索找到數(shù)十種替代答案；但是，大多數(shù)情況下你只需要一個(gè)。
.your-class-name {
display: flex;
justify-content: center;
align-items: center;
}?display：flex；?將一個(gè)接一個(gè)地在水平行中對(duì)齊您的子元素。要使其成為垂直行，請(qǐng)?zhí)砑??flex-direction: column; ?到代碼的末尾。
你的主軸由 ?flex-direction? 定義。行是默認(rèn)值。
如果你使用 ?justify-content: center;?，則主軸上的元素將對(duì)齊。對(duì)于我們的代碼示例，這表示項(xiàng)目將水平居中。
你的交叉軸由 ?align-items? 定義，這意味著你的元素垂直居中。
這里可以傳遞很多屬性，但我只強(qiáng)調(diào)一個(gè)： ?justify-content: space-between; ?因此，行的開頭或結(jié)尾將沒有邊距。
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? 等直接將屬性附加到邊上，或者你可以使用單個(gè)邊距屬性來(lái)覆蓋所有內(nèi)容：
margin: {{ top }} {{ right }} {{ bottom }} {{ left }};如果省略 ?bottom?，它將繼承 ?top ?（查看我們的示例）！如果省略 ?left?，它將繼承 ?right?。
3. padding
首次出現(xiàn)時(shí)，填充似乎與邊距相似。
語(yǔ)法與邊距相同，速記也相同。
那么，我們?yōu)槭裁葱枰?/p>
考慮一個(gè)物理手提箱的情況。你想記下這個(gè)案子。
但是，你不想從左上角開始寫作。你應(yīng)該稍微縮進(jìn)你的內(nèi)容。
填充將用于此。我們?cè)氐膬?nèi)部受到填充的影響。
但是，如果你有兩個(gè)彼此靠近的行李并希望在它們之間留出空間，則可以使用邊距。
4. background-color
這是一個(gè)相對(duì)簡(jiǎn)單的方法，但它是必須的。此屬性適用于大多數(shù) 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 令人著迷，因?yàn)樗试S您設(shè)置不透明度和顏色。你看到0.5了嗎？這意味著將有 50% 的透明度。
5.color
顏色與背景顏色相似，不同之處在于它會(huì)影響文本的顏色。其他一切都一樣，甚至是透明度。
6.opacity
但是我們可以讓任何事情變得透明！
opacity: 0.1; // 10% visibility
opacity: 0.9; // 90% visibility
這對(duì)于禁用狀態(tài)或有趣的效果很有用。
7.width
這是一個(gè)很難的問題。大多數(shù)時(shí)候你不想有固定的寬度。ni的設(shè)計(jì)應(yīng)該適合移動(dòng)設(shè)備，你可以使用邊距和填充來(lái)實(shí)現(xiàn)。
但是，有時(shí)你必須得到修復(fù)。那么您想將圖標(biāo)的大小設(shè)置為 24 像素嗎？
另外，看看這篇文章。縮小頁(yè)面進(jìn)行探索。你會(huì)注意到它并沒有一路走來(lái)。
因?yàn)檎麄€(gè)頁(yè)面都包含 ?max-width? 屬性，所以就是這種情況。將其環(huán)繞在你的網(wǎng)站上是個(gè)好主意。
8. height
由于我們滾動(dòng)方向的性質(zhì)，高度比寬度容易得多。
但是，你應(yīng)該盡可能少地使用預(yù)設(shè)高度。你可以執(zhí)行此操作的一個(gè)地方是你的標(biāo)題。
還存在所有其他限定符，例如 ?min-height? 和 ?max-height?。
9.cursor：pointer；
將鼠標(biāo)懸停在此頁(yè)面上的任何按鈕上。你能看到光標(biāo)是如何變成一只小手的嗎？
對(duì)此的解釋是游標(biāo)：指針。只要能讓他們做某事（按鈕、鏈接等），就應(yīng)該使用它。
10. font-size
這個(gè)易于使用并控制文本大小。如果你是一個(gè)完全的初學(xué)者，我建議堅(jiān)持使用 ?px?。
如果你想深入一點(diǎn)，看看 ?rem?。簡(jiǎn)而言之，你以 ?px? 為單位設(shè)置默認(rèn)字體大小，所有其他字體都與該數(shù)字成比例。
例如，如果你的基礎(chǔ)值為 ?16px?，則 ?2rem ?將為 ?32px?。
11. font-family
你是否正在尋找各種字體？?Google Fonts? 很棒，選擇一個(gè)，將它包含在您的 ?index.html? 中，并將其名稱添加到 ?font-family? 中是輕而易舉的。
12.：hover
這將在懸停時(shí)為某個(gè)元素添加任何效果。
.your-class-name:hover {
cursor: pointer;
}
我們的示例將光標(biāo)更改為指針。
結(jié)論
如果我告訴你，你會(huì)用這 12 個(gè)屬性解決大部分 CSS 問題呢？
當(dāng)然，根據(jù)你的情況，你可能需要更多，或者你需要更深入地研究其中一些。
但這足以構(gòu)建一個(gè)外觀穩(wěn)固的網(wǎng)站。
