1、display:none
（1）、浏览器不会生成属性为display: none;的元素。
（2）、display: none;不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样。
（3）、display: none;不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。
（4）、transition无效。
2、visibility:hidden
（1）、元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变html原有样式。
（2）、visibility: hidden会被子孙继承，子孙也可以通过显示的设置visibility: visible;来反隐藏。
（3）、visibility: hidden;不会触发该元素已经绑定的事件。
（4）、visibility: hidden;动态修改此属性会引起重绘。
（5）、transition无效。
3、opacity:0;filter：alpha(opacity=0-100;（考虑浏览器兼容性的问题，最好两个都写上）
（1）、opacity:0;filter：alpha(opacity=0-100;只是透明度为100%,元素隐藏，依然占据空间,隐藏后不会改变html原有样式。
（2）、opacity:0;filter：alpha(opacity=0-100;会被子元素继承,且子元素并不能通过opacity=1，进行反隐藏。
（3）、opacity:0;filter：alpha(opacity=0-100;的元素依然能触发已经绑定的事件。
（4）、transition有效。
4、各种隐藏
{ display: none; /* 不占据空间，无法点击 / }
{ visibility: hidden; / 占据空间，无法点击 / }
{ opacity: 0; filter:Alpha(opacity=0); / 占据空间，可以点击 / }
{ position: absolute; top: -999em; / 不占据空间，无法点击 / }
{ position: relative; top: -999em; / 占据空间，无法点击 / }
{ position: absolute; visibility: hidden; / 不占据空间，无法点击 / }
{ height: 0; overflow: hidden; / 不占据空间，无法点击 / }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); / 不占据空间，可以点击 */ }
display：none，opacity:0，visibility：hidden的区别
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 先把css隐藏页面元素有几种方法列出来，方便查看以及使用，下文再分析其中的原理 display ： none ; ...
- 大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。 今天给大家分享一下，修真...
