全部文章
共 1306 篇文章
重排重绘与GPU加速_transform是否会调用gpu
重排重绘 我们知道在浏览器渲染过程中存在重排和重绘过程 重排 当出现以下行为时，会引起重排。 添加或删除DOM元素 元素的位置发生变化 元素的尺寸发生变化 浏览器的窗口尺寸变化 重绘 对 DOM 操作简单修改样式（比如修改元素的 visibility、color、background color 等）时会引起重绘 重排一定会引起重绘！ 相比较来看，重拍的花销是比重绘要大得多的。所以我们在优化性能的时候会尽量减少dom操作来减少重排。 （...
animation、transition、transform、translate
容易混淆的几个css属性 css属性很多，并且有些无论是字母的拼写还是字面上的意思，都容易混淆，比如我列出来的几个属性，是不是也混淆过你～ | 属性 | 含义 | | | | | animation（动画） | 用于设置动画属性，他是一个简写的属性，包含6个属性 | | transition（过渡） | 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同 | | transform（变形） | 用于元素进行...
px 与像素是如何换算的
px 是所有开发者接触 css 时所了解的第一个单位，也是开发过程中最常见的单位。 如果你还不清楚 px、逻辑像素、物理像素之间是怎样换算的，本文将从头到尾帮你梳理一遍 像素 ，为影像显示的基本单位，译自英文“ pixel ”， pix 是英语单词picture的常用简写，加上英语单词“元素” el ement，就得到 pixel ，故“像素”表示“画像元素”之意，有时亦被称为 pel （ p icture el ement）。每个这样...
元素的层叠顺序
ed9f518c73f8be6d86ffebc1f6901f7d.png
单行，多行文本溢出隐藏
035ce559b5327817eb751c6db911d026.png
css-loader和style-loader关系原理及作用
用webpack打包就需要用到css loader和style loader，接下来让我们逐步解析两个loader的作用以及它们都做了怎样的工作 创建空项目 创建一个名为demo的空文件夹，这就是我们实验的项目目录 进入到目录下执行 按照上述两步，我们就搭建好了最简单的项目环境了，接下来需要安装依赖包和创建源码目录 在项目目录创建 子目录 基于webpack4讲解，运行npm安装所需依赖 创建 创建一个 样式文件 创建 程序入口文件 运...
除了 filter 还有什么置灰网站的方式
<img width="756" height="426" src="../../ resources/916f9d87c7a249989186c3f599298132 0f99ddbed2f34da1a.webp" class="jop noMdConv" 大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样： <img width="724" height="353" src="../../ resources/...
VS Code自定义代码颜色
VS Code自定义代码颜色，看这一篇就够了 众所周知，VS Code是一款自定义空间很大的开发工具，需要的功能都在插件里，可谓非常方便，但是主题这个东西每个人的喜好都不同，即便是在拓展插件里找了许多主题拓展，也很难找到完全符合自己喜好的主题，那么有没有方法可以自己定义VS Code的主题呢，答案是当然有！继续看，打造属于你自己的主题。 开始之前需要了解的地方 VS Code除默认设置之外，其他几乎所有需要自定义的设置，都可以通过编辑s...
Object.defineProperty()
方法允许你在对象上定义一个新属性，或者修改一个已有的属性。这个方法接收三个参数： ：要在其上定义属性的对象。 ：要定义或修改的属性的名称。 ：将被定义或修改的属性描述符。 属性描述符（descriptor）是一个包含以下可选属性的对象： ：属性的值，默认为 。 ：布尔值，表示该属性是否可写，默认为 。 ：布尔值，表示该属性是否可枚举，默认为 。 ：布尔值，表示该属性是否可配置，默认为 。