![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
吃葡萄不吐葡萄皮嘻嘻
。
展开
-
回流和重绘的区别
什么是回流? 当一个元素自身的宽高,布局,显示或隐藏,或元素内部的文字结构发生变化,导致需要重新构建页面的时候,就产生了回流。 什么是重绘? 当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改变了元素的外观风格的时候,就产生了重绘。(只改变自身样式,不会影响到其他元素) 什么时候会进行回流? 1、添加或者删除可见的 DOM 元素; 2、元素的位置发生改变; 3、元素的尺寸发生改变; 4、内容改变; 5、页面第一次渲染的时候; 什么时候会进行重绘? 只改变自身样式,不会影响到其他元素; CSS 样式改原创 2022-03-22 17:27:07 · 349 阅读 · 0 评论 -
CSS权重理解
CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。 权重的等级 1、!important,加在样式属性值后,权重值为 10000 2、内联样式,如:style="",权重值为1000 3、ID选择器,如:#content,权重值为100 4、类,伪类和属性选择器,如: content、:hover 权重值为10 5、标签选择器和伪元素选择器,如:div、p、:before 权重值为1 6、通用选择器(*)、子选择器(>原创 2022-03-22 17:12:09 · 256 阅读 · 0 评论 -
检测元素外部(或内部)的单击
demo如下: 页面结构: 当我们需要检测一个点击是发生在一个特定元素 el 的内部还是外部,通常使用的方法 let pEl = document.querySelector('.p') window.addEventListener('click', e => { // 获取被点击的元素 const currtentEl = e.target; console.log(currtentEl) // 检测在原创 2022-03-08 11:59:06 · 403 阅读 · 0 评论