一些最常見(jiàn)和最有趣的CSS錯(cuò)誤

當(dāng)我們非常專注于處理Web項(xiàng)目時(shí)，我們往往會(huì)忘記或犯一些可能導(dǎo)致無(wú)效CSS代碼的錯(cuò)誤。我喜歡稱這些“潛意識(shí)錯(cuò)誤”。導(dǎo)致我們問(wèn)自己的那種錯(cuò)誤：“糟糕，我為什么要這樣做？”而解決它們并不需要花費(fèi)很多時(shí)間，只要您第一時(shí)間發(fā)現(xiàn)它們即可。

我在Twitter上詢問(wèn)了前端開(kāi)發(fā)人員可能犯的最有趣的錯(cuò)誤，并且得到了一些有趣的答復(fù)。

您經(jīng)常做的最有趣的CSS錯(cuò)誤是什么？

我的字體太粗了。??

你呢？pic.twitter.com/XUV44Re6Fm

-艾哈邁德·謝德（@ shadeed9）2020年8月9日

在本文中，我將介紹我們?cè)跐撘庾R(shí)中遇到的一些最常見(jiàn)和最有趣的CSS錯(cuò)誤。

我做的錯(cuò)誤

字體大小

之間誤認(rèn)font-size和font-weight是常見(jiàn)的。這是我做得太多的錯(cuò)誤。

.title {
    font-size: bold;
}

不透明度

我不完全知道原因，但有時(shí)我會(huì)忘記不透明度值的百分比。

.title {
    opacity: 50;
}

另一個(gè)常見(jiàn)的問(wèn)題是使該opacity物業(yè)蒙混過(guò)關(guān)。

.title {
    /* It's not easy to spot this */
    opaciy: 0.5;
}

字體粗細(xì)

是light還是lighter？

.title {
    font-weight: light;
}

填充

當(dāng)您認(rèn)為該屬性為padding，而實(shí)際上為時(shí)，可能會(huì)發(fā)生這種情況padding-top。

.section {
    padding-top: 10px 20px;
}

CSS網(wǎng)格

有時(shí)，我輸入grid-column而不是grid-template-columns。

.section {
    grid-columns: 1fr 1fr 1fr;
}

CSS變量

我不是為什么，但是我發(fā)現(xiàn)我懶得寫(xiě)var(--brand-color)。

.title {
    color: --brand-color;
}

盒子陰影

我總是忘記box-shadow應(yīng)該使用來(lái)重置none。

.title {
    /* Invalid */
    box-shadow: 0;
}

艾哈邁德·霍斯納（Ahmed Hosna）也提到

來(lái)自社區(qū)

能見(jiàn)度

來(lái)自大利利夫尼

.title {
    visibility: none;
}

寬度

我無(wú)法數(shù)出這樣做的次數(shù)，這讓我想起了Sublime Text。

來(lái)自bullzito

.title {
    widows: 100px;
}

偏移屬性

從定位元素的CSS偏移屬性中放棄單位有一種奇怪的感覺(jué)。

來(lái)自ciruelo

.elem {
    left: 14;
}

CSS Calc（）

如果您使用的代碼編輯器沒(méi)有提供適當(dāng)?shù)耐怀鲲@示，您將錯(cuò)過(guò)這一部分。

來(lái)自斯文Wolfermann

.elem {
    font-size: clac(14px + 1vw);
}

CSS顏色

我記得遇到這樣的錯(cuò)誤。也許這是red用來(lái)快速證明某些東西的結(jié)果？

來(lái)自TJ特里溫

.elem {
    color: #red;
}

顯示

.title {
    display: absolute;
}

來(lái)自尼廷蘇雷什

變身

.title {
    translate: (-50%, -50%)
}

來(lái)自哈佛鮑勃

結(jié)語(yǔ)

「關(guān)注公眾號(hào)IQ前端，一個(gè)專注于CSS/JS開(kāi)發(fā)技巧的前端公眾號(hào)，更多前端小干貨等著你喔」