用法:
<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。因为它不是跟用户不相关,只是目前还不能展示出来。