css样式属性使元素隐藏

区别:

1、相同点

       display: none;与visibility: hidden都能使元素隐藏；

2、不同点:

        display: none;  (隐藏该元素并且不占位)

        visibility: hidden;(隐藏该元素且占位)

css

 

html

 

 

浏览器

      此处使用开发者工具可以看到我所指向的这个div虽然隐藏了但还是占位置的，这就是使用 visibility: hidden；属性隐藏

 再使用开发者工具查看display: none;隐藏的div标签，此处我用查看器指向div标签，浏览器并未显示我所指向的div标签，也就是说这个在浏览器上彻底消失

扩展 

        visibility: hidden;在使用after伪元素清除浮动时也是必要属性