一、相同点:
两者都可以隐藏元素
二、不同点:
1、是否占据空间:
display: none;隐藏时不占原先的页面空间,不影响页面布局
visiblilty:hidden;隐藏时占据原先的页面空间,影响页面布局
2、是否具有继承性:
display: none;不具有继承属性,元素display:none及其子元素都将隐藏不可见
visiblilty:hidden;具有继承性,visiblity:hidden元素的子元素却可以设置visibility: visible 显示出来
3、计数器是否正常运行:
display:none :影响计数器的计数,计数器重新排列
visibility: hidden不会影响计数器的计数,其计数器仍在运行
4、display:none 引起页面重绘和回流, visiblity:hidden 只引起页面重绘:
display:none;是会有回流,HTML元素的宽度、高度等各种属性值都将丢失
visibility: hidden;不会有回流,HTML元素仅仅是在视觉上看不见,而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值