display:'none'与visibility:hidden的区别,position,opacity 和 rgba区别

display: none;与visibility: hidden;的区别

　　display: none;与visibility: hidden   功能：隐藏元素

　　区别：

　　　　1. display: none不占位置，visibility: hidden占位置。

　　　　原理：

　　　　　　display: none第一次不绘制

　　　　　　H+css =>合并(这里不合并display:none)=>渲染 => 回流(合并==>渲染)

　　　　　　visibility: hidden进行第一次绘制

　　　　　　H+css =>合并(这里合并visibility: hidden)=>渲染 => 重绘(渲染)

　　　　2. display: none回流和重绘 。 visibility: hidden重绘 【重点】

　　　　　　回流:改变元素的大小位置影响到其他元素的 尺寸大小、位置（left、top）

　　　　　　重绘:不影响其他元素的 盒子font-size、background....

　　　　　　触发回流必定会触发重绘

　　　　　　触发重绘不一定会触发回流

position有哪些值?有什么作用? 【特别多公司问】

　　static [默认]    没有定位

　　fixed   相对于浏览器窗口

　　absolute  相对于第一个拥有relative的父元素的

　　relative  相对于自身

　　absolute和relative区别

　　　　1. relative不脱离文档流，absolute脱离文档流

　　　　2. relative只有俩个值(left、right、top、bottom如果同时存在left干掉right，top干掉bottom)

 　　　　absolute可以写四个值

opacity 和 rgba区别 

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。

标签：opacity,none,区别,visibility,重绘,relative,hidden,display
来源： https://www.cnblogs.com/qd-lbxx/p/16257905.html