寫CSS時經常犯的錯誤有哪些

這篇文章主要介紹“寫CSS時經常犯的錯誤有哪些”，在日常操作中，相信很多人在寫CSS時經常犯的錯誤有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”寫CSS時經常犯的錯誤有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

Font Size

我在font-size和font-weight之間經常犯錯誤，如下所示：

.title {     font-size: bold; }

Opacity我也不知道啥原因，但有時我會忘記寫百分比 ：

.title {     opacity: 50; }

關于 opacity 我還經常犯下面錯誤：

.title {     /* 現這一點并不容易，你們看出錯誤在哪里嗎? ?*/     opaciy: 0.5;

Font Weight

是 light 還是 lighter ??

.title {     font-weight: light; }

Padding

當你認為屬性是padding，而實際上用的是padding-top時，就會發生這種情況?:

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

人才，優秀 ?。

CSS Grid

對于 CSS Grid 有時我會潛意識的寫 grid-column 而不是 grid-template-columns ?:

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

CSS 變量

對于 CSS 變量的使用，我也經常忘記寫 var ?：

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

正確的寫法如下：

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

Box Shadow?

對于重置 box-shadow 我經常用 0 來重置：

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

正確的寫法如下：

.title {     box-shadow: none; }

Visibility

隱藏元素可以使用 visibility，但我會經常這樣寫 ?：

.title {     visibility: none; }

正確的寫法如下：

.title {     visibility: hidden; }

Width

對于 width 有時會腦抽 ?，這樣寫：

.title {     widows: 100px; }

Offset 屬性

對于 css 偏移屬性，我也會經常這么寫:

.elem {     left: 14; }

少了啥，大家自己體會 ?。

CSS calc()

如果你的代碼沒有高亮的提示的功能，你也許也會這樣寫 ?：

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

CSS color

我記得曾經遇到過這樣的錯誤 ?:

.elem {     color: #red; }

Display

不多說了，大家自己體會：

.title {     display: absolute; }

Transforms?

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

到此，關于“寫CSS時經常犯的錯誤有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！