当前位置: 首页 > Web前端 > JavaScript

总结一下写CSS时常犯的一些错误!

时间:2023-03-27 15:58:19 JavaScript

微信搜索【GreatMovetotheWorld】,第一时间与大家分享前端行业动态、学习路径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi,里面有完整的测试站点、资料和我的一线厂商访谈系列文章。当我们非常专注于编写代码时,我们常常会不自觉地编写一些无效的CSS代码。我称之为“潜意识错误”。在造成这种错误之后,我们常常会问自己:“我为什么会写这么低级的错误?”不过这些错误都比较容易解决,也不需要花很多时间,改正即可。跟随这篇文章,看看我经常写哪些有趣的CSS错误。字体大小?我经常把font-size和font-weight弄错,如下:title{opacity:50;}关于不透明度,我经常犯以下错误:.title{/*这个点不好找,你看错在哪里了吗??*/不透明度:0.5;字体粗细是轻还是轻??.title{font-weight:light;}Padding这就是当你认为一个属性是padding,但实际使用padding-top?:.section{padding-top:10px20px;}talent,excellent?。CSSGrid对于CSSGrid有时我会下意识地写grid-column而不是grid-template-columns?:.section{grid-columns:1fr1fr1fr;}CSSvariables对于CSS变量的使用,我经常忘记写var?:.title{颜色:--brand-color;}?正确的写法如下:.title{color:var(--brand-color)}BoxShadow?对于重置box-shadow,我经常使用0来重置:.title{/*Illegal*/box-shadow:0;}?正确的写法如下:.title{box-shadow:none;}Visibility隐藏元素可以使用visibility,但是我经常这样写?:.title{visibility:none;}?正确的写法如下:.title{visibility:hidden;}widthissometimesbrain-twitchingforwidth?,这样写:.title{widows:100px;}offsetattribute对于css的offset属性,我也会我经常这样写:.elem{left:14;}少了什么,你亲身体验过吗?CSScalc()如果你的代码没有高亮提示的功能,你也可能这样写?:.elem{font-size:clac(14px+1vw);}CSScolor我记得遇到过这样的错误?:.elem{color:#red;}显示?话不多说,大家自己体会吧:.title{display:absolute;}Transforms?.title{translate:(-50%,-50%)}天赋【三通】是小智不断分享的最大动力。本博客如有错误或建议,欢迎留言。最后谢谢大家的观看。作者:Ahmadshaded译者:FrontendXiaozhi来源:sitepoint原文:https://heydesigner.com/css-m...bug之后是日志调试的时候了。顺便推荐一个好用的BUG监控工具,Fundebug。交流有梦想,有干货,微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi,里面有完整的测试站点、资料和我的一线厂商访谈系列文章。