范仁义css3课程---17、元素的显示和隐藏
范仁义css3课程---17、元素的显示和隐藏
一、总结
一句话总结：
设置元素显示隐藏一般有三种方法，display属性设置元素以何种方式显示，visibility设置元素的可见性，opacity设置元素的透明度
1、设置元素隐藏的三种方法？
display属性设置元素以何种方式显示：display:none;
visibility设置元素的可见性：visibility:hidden;
opacity设置元素的透明度：opacity:0;
二、元素的显示和隐藏
博客对应课程的视频位置：17、元素的显示和隐藏
https://www.fanrenyi.com/video/10/48
1、设置元素隐藏的三种方法
a、 display
- none 不显示。
- block 显示为块级元素。
- inline 显示为内联元素。
- inline-block 行内块元素（会保持块元素的高宽）。
b、visibility
- visible 元素可见
- hidden 元素不可见
c、opacity
- opacity:0-1;
2、visibility: hidden 和 display:none 的区别
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
对于 CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。
visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：
- 1、display:none 元素不再占用空间。
- 2、visibility: hidden 使元素在网页上不可见，但仍占用空间。
然而，visibility 还可能取值为 collapse 。
当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。
在不同浏览器下，对 visibility: collapse 的处理方式不同：
- 1、visibility: collapse 的上述特性仅在 Firefox 下起作用。
- 2、在 IE 即使设置了 visibility: collapse，还是会显示元素。
- 3、在 Chrome 下，即使会将元素隐藏，但无论是否是与 table 相关的元素，visibility: collapse 与 visibility: hidden 没有什么区别，即仍会占用空间。
三、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>元素的显示和隐藏</title> 6 <style> 7 .div1{ 8 display: none; 9 /*visibility: visible;*/ 10 /*opacity: 0;*/ 11 /*display: block;*/ 12 } 13 </style> 14 </head> 15 <body> 16 <div class="div1"> 17 泪眼问花花不语，乱红飞过秋千去。 18 <img src="../imgs/aa.gif" alt=""> 19 </div> 20 <div> 21 有花堪折直须折，莫待无花空折枝 22 </div> 23 </body> 24 </html>
浙公网安备 33010602011771号