![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
guolinengineer
渴望知识的一个小白
展开
-
css3 新特性(一):多类选择器,带标签类名选择器,群组选择器
多类选择器:假如有<li class=" important item ">, <li class=" import ">, <li class=" item ">三个标签样式为:.item .important { background: red } 只能选择到第一个<li>带标签类名选择器:在html文档中,div可原创 2018-12-16 14:27:15 · 1536 阅读 · 0 评论 -
浏览器渲染过程
1. 解析html,生成DOM树,解析css,生成CSSOM树2.将DOM树和CSSDOM树结合,生成渲染树(Render Tree)3.Layout (回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小)4.Painting(重绘):根据渲染树的以及回流得到的几何信息,得到节点的绝对像素5.Display:将像素发送给gpu,展示在页面上,(这一步...原创 2018-12-17 11:24:36 · 113 阅读 · 0 评论 -
最小化重绘和重排
const e1 = document.getElementById('test');e1.style.padding = '5px';e1.style.borderLeft = '1px';e1.style.borderRight = '2px';上面例子中,三个样式被修改(几何结构改变),每一个都会引起回流。当然,大部分浏览器都做了优化,只会触发一次重排。但是如果旧版浏览器浏览或者...转载 2018-12-17 16:42:40 · 368 阅读 · 0 评论 -
css3中不需要回流和重绘的属性
众所周知,页面的回流和重绘会造成额外的计算消耗,降低用户体验,而css3自带的硬件加速则根本不需要回流和重绘css3不需要回流和重绘的属性:transform opacity filter Will-changetransform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜opacity属性设置元素的不透明级别。如 opacity: 0...原创 2018-12-17 17:00:40 · 961 阅读 · 0 评论 -
top和margin-top的区别
top、margin-top的区别:1、top、bottom、left、right是绝对定位,必须设置position为absolute。 margin一系列设置是相对定位。注意:如果用top等,而position未设置为absolute,那设置是不起作用的。2、top这些在绝对定位的前提下,这个绝对定位,是相对body 或者 position:relative的父级元素的绝对定位。mar...原创 2018-12-18 17:59:02 · 7040 阅读 · 1 评论