详解css3中display和visibility的区别

在css3中，display和visibility都具备对元素进行隐藏和显示的功能。

display语法

display:none | block
/*none表示隐藏 block表示显示*/

visibility语法

visibility:hidden | visible
/*hidden表示隐藏 visible表示显示*/

其中要区分两者的区别很简单，尝试将两者直接翻译过来，display就是显示，而visibility就是可视性的意思

再看看两者在实际的代码效果中的表现

原图:

 设置第一个图片的display的值为隐藏

 设置第一个图片的visibility的值为隐藏

 很明显，两者虽然都对图片进行了隐藏，但是visibility的隐藏只是隐藏了图片的实体内容，图片的所占空间依旧存在，而display方法不仅对图片的实体内容进行了隐藏，同时隐藏了图片的尺寸大小。如果使用display对元素进行隐藏时，该元素下方还存在其他元素，则该元素为自动上移补位。而visibility方法则不会。