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

都能使元素不可见,区别:

  • display:none会让元素在渲染树中消失,不占用任何空间;
    visibility: hidden;则保留元素占据的空间,也依旧在渲染树中。

  • display:none是非继承属性,但由于元素在渲染树中消失因此子孙节点也会一并消失,通过修改子孙节点的属性也无法显示。
    visibility: hidden;是继承属性,子孙节点消失是由于继承了hidden值,那么只要设置visibility: visible;就可以让子孙节点显示

  • 修改常规流中元素的display通常会造成文档重排
    修改visibility属性只会造成本元素的重绘

你可能感兴趣的:(面试,css)