html
guolinengineer
渴望知识的一个小白
展开
-
行内元素和块级元素
行内元素: 不会占据新的一行 只能行内元素,不能包含块级元素 行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效; 块级元素: 会占据新的一行 块级元素中可以包含块级元素和行内元素 块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。 ...原创 2018-12-20 15:57:30 · 525 阅读 · 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 · 370 阅读 · 0 评论 -
css3中不需要回流和重绘的属性
众所周知,页面的回流和重绘会造成额外的计算消耗,降低用户体验,而css3自带的硬件加速则根本不需要回流和重绘 css3不需要回流和重绘的属性: transform opacity filter Will-change transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 opacity属性设置元素的不透明级别。如 opacity: 0...原创 2018-12-17 17:00:40 · 968 阅读 · 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 · 7077 阅读 · 1 评论 -
一个hover小过渡效果
元素标签上添加过渡的标准 : .course-item{ position: relative; top:0; transition:box-shadow,top 0.5s; } hover 后要改变的内容 .course-item:hover{ box-shadow:0 2px 15px -2px #8b8b8b; top: -5px; }这个和使...转载 2018-12-18 23:08:20 · 543 阅读 · 0 评论