display和visibility的区别

时间:2024-08-27 19:35:32

一、display和visibility的相同与不同点

1、相同点:display和visibility都有讲元素隐藏的意思

2、不同点:display是元素隐藏,隐藏的元素不占文档流

display和visibility的区别display和visibility的区别

      而visibility隐藏的元素仍然占文档流

display和visibility的区别display和visibility的区别

二、display和visibility的属性值

1、display

  display:block;将元素设置为块级元素,独占一行,能设置宽高

  display:inline-block;将元素设置为行内快显示,能设置宽高,但是不独占一行

  display:none;将元素设置为隐藏,后面的元素能自动往上填充

2、visibility

  visibility:visible;元素可见,默认值 

  visibility:hidden;将元素设置成隐藏,隐藏的元素仍然占据文档流

  visibility:collapse;只对table对象起作用,用在其他元素中表示隐藏

  visibility:inherit;继承其父级元素样式