Css visibility和display的使用
在CSS样式中，我们如果要设置一个html元素不可见，可以用visibility=hidden，也可以用 display=none。这二者有什么区别？ 下面一起来看下
操作方法
- 01
首先看下我们例子的html代码，主要是二个div，分别有样式v, 和d, 这二个div都有一个父div，父div样式名都是fc <div class="fc"> <div class="v"> visibility的使用 </div> </div> <div class="fc"> <div class="d"> display的使用 </div> </div>
- 02
看下二个div的样式，.v, .d的样式现在都是完全一样的，如图， 我们主要设置了背景色，宽度和高度
- 03
再看下父div的样式，.fc设置了另一个颜色作背景色，并加了最小高度，如图
- 04
先看下页面显示效果，如图，二个div的显示效果都一样。
- 05
我们先为第一个div加上visibility: hidden，让它隐藏起来，
- 06
显示效果如图，可以看到，这个div隐藏看不到了，但它的父div还是显示100px的高度（这个是已经隐藏的div的高度）。 所以用visibility: hidden隐藏元素后，元素虽然不可见了，但还会占有原来的空间。
- 07
我们再为第二个div加上display: none，让它隐藏起来，
- 08
看下页面显示效果，如图。 第二个div隐藏不见了，而且它的父div显示的高度只有10px，就是它自己的样式min-height的值。而不是隐藏的div的高度（100px) 所以，用display: none隐藏元素后，元素不可见，而且不会占有原来的空间。 这就是这二种方法的区别，大家在使用时，根据自己的需要来选择用哪种。
赞 (0)