浅谈display: none、visibility: hidden、overflow: hidden、opacity: 0

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使其重新显示

原文地址：https://www.cnblogs.com/yujiao-99/p/12656268.html

时间： 2024-10-11 20:38:50

浅谈display: none、visibility: hidden、overflow: hidden、opacity: 0的相关文章

display:none opacity:0以及visibility:hidden的区别

相同作用 能够对元素进行隐藏 1.空间占据 display: none;不占据空间,所以动态改变此属性时会引起重排. visibility: hidden元素会被隐藏,但是不会消失,依然占据空间. opacity=0只是透明度为100%,元素隐藏,依然占据空间. 2.继承性 display:none不会被子元素继承,但是父元素都不在了,子元素自然也就不会显示了,皮之不存,毛之安附~~ visibility:hidden 会被子元素继承,可以通过设置子元素visibility:visible 使子

浅谈Xcode5和Xcode7在系统创建的文件夹和文件中的区别

*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } a { color: #4183C4; } a.absent { color: #cc0000; } a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute

display: none;、visibility: hidden、opacity=0区别总结

display: none; 1.浏览器不会生成属性为display: none;的元素. 2.display: none;不占据空间(毕竟都不熏染啦),所以动态改变此属性时会引起重排. 3.display: none;不会被子类继承,但是···子类是不会显示的,毕竟都一起被kill啦. 4.display,是个尴尬的属性,transition对她无效.(毫无争议) visibility: hidden; 1.元素会被隐藏,但是不会消失,依然占据空间. 2.visibility: hidden会

如何让html的某个元素隐藏，我们一般有三种方式：display:none, opacity:0, visibility:hidden。但这三种方式有何区别？

1. display:none 该方式让元素隐藏时,隐藏的元素不占空间,隐藏后将改变html原有样式.一旦父节点元素应用了display:none,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事. 2. visibility:hidden 该方式让元素隐藏时,隐藏的元素还是占用原有位置,隐藏后不将改变html原有样式.但,如果该元素的子元素使用了visibility:visible的话,改子元素将不被隐藏. 3. opacity:0 该方式让元素隐藏时,隐藏的元素还

元素隐藏的方式之--hidden，display，visibility

<html lang="en"> <head> <meta charset="UTF-8"> <title>标签或者内容的隐藏</title> <style> .display-none{ display:none; } .display-block{ display:inline-block; } /* visibility属性 */ .visibility-hidden{ visibilit

display:none;visibility:hidden;和opacity:0;的区别

display:none; visibility:hidden; opacity:0; 它们都可以让元素隐藏掉,但是它们之间还是有区别的 display:none;隐藏后不占空间 而另外两个虽然隐藏了元素,但是还是占据着空间 而transition对于display:none;和visibility:hidden;是无效的 但是对于opacity:0;是有效的 原文地址:https://www.cnblogs.com/cz0017/p/10159850.html

overflow、display、visibility的区别

Overflow:hidden 对行内元素无效,必须是块级元素,并且设置宽度高度. 隐藏之后元素依然占据着位置. Display:none 使用此属性之后元素不存在了,元素占据的位置也不存在. Visibility:hidden 使用此属性之后元素不存在了,元素占据的位置依然存在.

溢出overflow: hidden

如果要防止内容把div容器或者表格撑大,可以在CSS中设置一.overflow: hidden; 表示如果内容超出容器大小,就把超出部分隐藏(相当于切掉)二.overflow: scroll; 这个表示给内容加上控制滑块,可以在容器内部拖动它查看,而不把容器撑大(相当于窗体上的控制滑块) 当一个元素固定为某个特定大小,但内容在元素中放不下.此时就可以利用overflow属性来控制这种情况 定义 overflow溢出 值: visible | hidden | scroll | auto | in

关于overflow: hidden;的一个诡异问题

1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="ie=edge"> 6 <title>Title</title> 7 <meta name="v