追着幸福跑|总结一些，我在书写 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 的时候，经常犯的错误】作者：Ahmad shaded 译者：前端小智 来源：sitepoint 原文：
推荐阅读
- 笙笙千离|惠若琪李宇春同框颁奖，春春身高176还自卑，巨人身高收获幸福
- 资讯早知道|9年后再看《步步惊心》，发现若曦无论跟谁都不会幸福
- 弹钢琴|原创吉娜为1岁宠物兔庆生，郎朗弹钢琴助兴，幸福温馨像一家三口
- 人民日报|岳阳君山区：消费扶贫托起贫困户稳稳的幸福
- “全国人大 ”微信公众号|何健忠：以实施民法典提升人民美好生活的“幸福指数”
- 经济日报-中国经济网|【幸福花开新边疆】219国道旁的“脱贫事”
- 新华网|【幸福花开新边疆】奋发学技能 靠己奔小康
- 【幸福花开新边疆】奋发学技能 靠己奔小康
- 【幸福花开新边疆】219国道旁的“脱贫事”
- 岳阳君山区：消费扶贫托起贫困户稳稳的幸福