css中display/visibility和html中hidden的区别

用法：

<div style="display:">显示</div>
<div style="display:none;">隐藏不占位</div>

<div style="visibility:">显示</div>
<div style="visibility:hidden;">隐藏占位</div>

<div >显示</div>
<div hidden="hidden">消失不占位</div>或者<div hidden>消失不占位</div>

说明：

CSS display 属性
　隐藏必须使用none值，该隐藏不占位，页面源代码可见。
　显示可使用空或block或inline，意思分别为：无此属性、显示视为div（有换行符）、显示视为span（无换行符）。
CSS visibility 属性
　隐藏必须使用hidden值，该隐藏占位，页面源代码可见。
　显示可使用空或visible，意思分别为：无此属性、显示。
HTML hidden 属性
　隐藏只需标注hidden
　显示不标注hidden
　
HTML 是内容展示带有语义，CSS 是界面样式相关。
HTML hidden 这个属性，就表示与浏览者不相关、不重要，浏览器在解析的时候，既然不相关就直接隐藏掉了。
如果你有些东西与用户不相关，比如 提交信息的 input 等，就可以用 hidden。
css中display/visibility就是从界面、视觉上的隐藏。如果你需要临时隐藏一些东西后面会再切换出来，
比如下拉菜单等，就可以用display/visibility。因为它不是跟用户不相关，只是目前还不能展示出来。

原文出处