浅谈display: nonevisibility: hiddenoverflow: hiddenopacity: 0

Posted 2021-03-02 yujiao-99

display: none

• 把一个元素隐藏，同时去除了宽高，也就是在文档流中没有了元素的位置，但是会被加载
• 会产生回流和重绘
• 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了

visibility: hidden

• 把一个元素隐藏，但不同的是该元素在文档流中依然占有原来的位置，同样是被加载的
• 只会引起页面重绘
• 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来

display: none和visibility: hidden的区别

• visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来，这个和display: none有着质的区别
• visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行，这和display: none完全不一样
• CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果，提高用户体验

overflow: hidden

让超出的元素隐藏，就是在设置该属性的时候他会根据你设置的宽高把多余的那部分剪掉；只会引起页面重绘

opacity: 0

• 设置一个元素的透明度，当一个元素彻底透明了，也就是隐身了，会占有其文档流的位置，也会加载
• 会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示