当我们非常专注写代码时候 , 我们往往会无意识的写出一些无效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()【写 CSS 的时候,经常犯的错误】如果你的代码没有高亮的提示的功能 , 你也许也会这样写 :
.elem { font-size: clac(14px + 1vw);}
CSS color我记得曾经遇到过这样的错误 :
.elem { color: #red;}
Display不多说了 , 大家自己体会:
.title { display: absolute;}
Transforms
.title { translate: (-50%, -50%)}
人才们的 【三连】 就是小智不断分享的最大动力 , 如果本篇博客有任何错误和建议 , 欢迎人才们留言 , 最后 , 谢谢大家的观看 。
推荐阅读
- 历史上的郑国结局 郑国灭亡的原因
- 光绪遗精是什么原因引起的 光绪为什么长期遗精
- 林冲打得过卢俊义吗 卢俊义和林冲谁的武功高
- 精制茶的保藏,2018年14月全国精制茶产量分析
- 碱性最强的茶都有哪些,哪些茶具有排毒祛痘的功效
- 喝红茶的好处和功效,男性喝红茶的好处和坏处
- 君山黄茶是什么茶,黄茶之最君山银针的特点
- 喝黑茶茶醉了怎么办,喝黑茶的禁忌与注意事项
- 一款比phpmyadmin更好用的WEB数据库管理工具
- 万圣节吃什么