总结一些,书写 CSS 的时候,经常犯的错误!

更新日期: 2022-08-19阅读: 764标签: 错误

当我们非常专注写代码时候,我们往往会无意识的写出一些无效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%)
}
作者:Ahmad shaded 译者:前端小智
原文: https://heydesigner.com/css-mistakes-on-autopilot/


链接: https://www.fly63.com/article/detial/12021

解决Cannot read property range of null 错误

vue工程npm run serve/start/dev启动时,node_modules文件报:Cannot read property range of null 错误,该问题是babel-eslint版本更新问题导致的;

HTTP 400 错误 - 请求无效 (Bad request)

在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里;原因:前端提交数据的字段名称或者是字段类型和后台的实体类不一致

js异步错误捕获

我们都知道 try catch 无法捕获 setTimeout 异步任务中的错误,那其中的原因是什么。以及异步代码在 js 中是特别常见的,我们该怎么做才比较?

不能执行已释放Script的代码

父页面初始化声明变量a为数组(数组对象是引用类型,赋值传递的是地址),创建iframe子页面后给父页面变量a赋值,赋值后销毁iframe子页面,再次调用变量a的时候就会抛出异常‘SCRIPT5011:不能执行已释放Script的代码’。

JS错误处理:前端JS/Vue/React/Iframe/跨域/Node

js错误的实质,也是发出一个事件,处理他,error实例对象message:错误提示信息,name:错误名称(非标准属性)宿主环境赋予

nodejs提示 cross-device link not permitted, rename 错误解决方法

文件上传的功能时候,调用fs.renameSync方法错误,这个提示是跨区重命名文件出现的权限问题。先从源文件拷贝到另外分区的目标文件,然后再unlink,就可以了。

Js中使用innerHTML的缺点是什么?

如果在JavaScript中使用innerHTML,缺点是:内容随处可见;不能像“追加到innerHTML”一样使用;innerHTML不提供验证,因此我们可能会在文档中插入有效的和破坏性的HTML并将其中断

Web前端开发,必须规避的8个错误点!

现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性。我们收集了一些在Web开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助Web开发者更好的完善网站。

web前端错误监控

为什么要做前端错误监控?1. 为了保证产品的质量2. 有些问题只存在于线上特定的环境3. 后端错误有监控,前端错误没有监控,前端错误分为两类: 即时运行错误和资源加载错误

自定义错误及扩展错误

当我们在进行开发的时候,通常需要属于我们自己的错误类来反映任务中可能出现的特殊情况。对于网络操作错误,我们需要 HttpError,对于数据库操作错误,我们需要 DbError,对于搜索操作错误,我们需要 NotFoundError,等等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!