display: none；和visiblilty:hidden；的区别

一、相同点：

                两者都可以隐藏元素

二、不同点：

        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元素仅仅是在视觉上看不见，而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值