欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

display:none 和 visibility:hidden的区别

程序员文章站 2024-02-19 08:27:40
...

display:none及visibility:hidden 两者均是隐藏元素,但是还是有区别的

区别:

dispaly:none  隐藏元素后,不占据文档流--会产生回流和重绘

visibility:hidden 隐藏元素,但却占据文档流--会重绘

例如:

<p>我是第一行元素</p>
<p style='display:none'>我是第二行元素</p>
<p style='visibility:hidden'>我是第三行元素</p>
<p>我是第四行元素</p>
display:none 和 visibility:hidden的区别