重排重绘与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/...
实现img图片不能被拖动的两种简单方法
1，在img标签中添加属性 draggable=“false” 2，通过css样式设置 img { webkit user drag: none; }
CSS之Display、Visibility和Opactity的区别
1\. display：none； DOM结构：浏览器不会渲染display属性为none的元素，不占据空间，意思就是页面上没有它的一席之地，你在开发者模式中选不中那个元素。 事件监听：无法进行DOM事件监听。点击事件无法触发，但是可以通过ref获取节点触发点击事件 性能：动态改变此属性时会引起重排，性能较差。 继承：不会被子元素继承，因为子元素也不被渲染。 transtion过渡不支持display。 2\. visibility：h...