标签：opacity none 区别 visibility 重绘 relative hidden display

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。