CSS隐藏元素 display、visibility、opacity的区别

关于使指定元素无法在视野内看到，有3个方法

display: none;

opacity: 0;

visibility: hidden;

1.display: none; 该方法会改变页面布局。

1. 元素彻底消失，脱离文档流。
2. 子元素跟随父元素被隐藏，并且无法单独显示。
3. 绑定的事件也无法触发。
4. 无论如何，DOM节点还是存在的，仍旧可以用 js 操作。

2.opacity: 0; 该方法不会改变页面布局。

1. 实际上是元素的透明度为0。
2. 子元素 opacity:1 是无效的，元素仍旧无法显示。
3. 绑定的事件仍旧可以触发。

3.visibility:hidden; 该方法不会改变页面的布局。

1. 使元素不可见。
2. 子元素设置 visibility:visible; 后，子元素会显示，但是父元素不会显示。
3. 绑定的事件不能触发。

4.height:0和overflow:hidden的组合

overflow:hidden用中文理解就是“溢出隐藏”，也就是盒子以外的内容都咔嚓掉不可见的。加上height:0，只要是一般的非inline水平元素，则元素内部所有子孙都应该是不可见的。

height:0和overflow:hidden组合隐藏“失效”的条件如下：祖先元素没有position:relative/absolute/fixed声明，同时内部子元素应用了position:absolute/fixed声明

5.overflow和text-overflo区别

text-overflow：clip/ellipsis; 　　属性规定当文本溢出包含元素时发生的事情。

overflow:hidden;    隐藏所有在超过盒子设定宽度范畴外的内容。