您好,欢迎访问一九零五行业门户网

一段代码弄清楚CSS属性display和visibility的差别_html/css_WEB-ITnose

css如果想要将dom元素隐藏,有2种做法:将display属性设置成none,或者将visibility属性设置成hidden。下面的html代码没有设置display和visibility属性。

使用display:none隐藏outb

使用visibility:hidden隐藏outb

对比结果可以很容易得出结论:display:none,元素实际上就从页面中移走了,它后面的元素就会自动上移;而visibility:hidden,则仅仅隐藏该元素,它占据的页面空间依然存在。
对于outb元素,如果将display和visibility组合使用会是什么结果呢?
display:block;visibility:hidden;   outb看不见,但仍然占页面空间。
display:none;visibility:hidden;   outb看不见,也不占页面空间。
display:none;visibility:visible;    outb看不见,也不占有空间。
display:block;visibility:visible;    outb可见,肯定占有空间。
上面的测试结果,在ie11/ff17/chrome39下表现都是一致的。
其它类似信息

推荐信息