寫(xiě)CSS時(shí)經(jīng)常犯的錯(cuò)誤有哪些

這篇文章主要介紹“寫(xiě)CSS時(shí)經(jīng)常犯的錯(cuò)誤有哪些”，在日常操作中，相信很多人在寫(xiě)CSS時(shí)經(jīng)常犯的錯(cuò)誤有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”寫(xiě)CSS時(shí)經(jīng)常犯的錯(cuò)誤有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

Font Size

我在font-size和font-weight之間經(jīng)常犯錯(cuò)誤，如下所示：

.title {     font-size: bold; }

Opacity我也不知道啥原因，但有時(shí)我會(huì)忘記寫(xiě)百分比 ：

.title {     opacity: 50; }

關(guān)于 opacity 我還經(jīng)常犯下面錯(cuò)誤：

.title {     /* 現(xiàn)這一點(diǎn)并不容易，你們看出錯(cuò)誤在哪里嗎? ?*/     opaciy: 0.5;

Font Weight

是 light 還是 lighter ??

.title {     font-weight: light; }

Padding

當(dāng)你認(rèn)為屬性是padding，而實(shí)際上用的是padding-top時(shí)，就會(huì)發(fā)生這種情況?:

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

人才，優(yōu)秀 ?。

CSS Grid

對(duì)于 CSS Grid 有時(shí)我會(huì)潛意識(shí)的寫(xiě) grid-column 而不是 grid-template-columns ?:

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

CSS 變量

對(duì)于 CSS 變量的使用，我也經(jīng)常忘記寫(xiě) var ?：

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

正確的寫(xiě)法如下：

.title {     color: var(--brand-color) }

Box Shadow?

對(duì)于重置 box-shadow 我經(jīng)常用 0 來(lái)重置：

.title {     /* 非法的 */     box-shadow: 0; }

正確的寫(xiě)法如下：

.title {     box-shadow: none; }

Visibility

隱藏元素可以使用 visibility，但我會(huì)經(jīng)常這樣寫(xiě) ?：

.title {     visibility: none; }

正確的寫(xiě)法如下：

.title {     visibility: hidden; }

Width

對(duì)于 width 有時(shí)會(huì)腦抽 ?，這樣寫(xiě)：

.title {     widows: 100px; }

Offset 屬性

對(duì)于 css 偏移屬性，我也會(huì)經(jīng)常這么寫(xiě):

.elem {     left: 14; }

少了啥，大家自己體會(huì) ?。

CSS calc()

如果你的代碼沒(méi)有高亮的提示的功能，你也許也會(huì)這樣寫(xiě) ?：

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

CSS color

我記得曾經(jīng)遇到過(guò)這樣的錯(cuò)誤 ?:

.elem {     color: #red; }

Display

不多說(shuō)了，大家自己體會(huì)：

.title {     display: absolute; }

Transforms?

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

到此，關(guān)于“寫(xiě)CSS時(shí)經(jīng)常犯的錯(cuò)誤有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！