HTML CSS display 布局属性

HTML CSS 布局 display 属性用于设置是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。将display 值为none，则表示隐藏该元素。

我们来看看下面这个利用 JavaScript 实现点击显示隐藏的DIV，再次点击又关闭的效果：

点击显示面板

此面板包含一个 <div> 元素，它默认是隐藏的。（display: none）

它由 CSS 设置样式，我们使用 JavaScript 显示它。（更改为 display: block）

隐藏元素的方式还有 visibility:hidden，同样可以是元素隐藏，但效果和 display:none ，我们该如何进行选择呢？

visibility:hidden 属性 将元素隐藏，但空间保留了其显示的位置，只是看不见而已。

display:none 属性的隐藏则是把元素占有的位置也一并消除，让人完全察觉不出之前存在某个元素。

下面两个元素分别使用display:none 属性 和 visibility:hidden 属性，对比一下效果可以很清晰的看出差异：

display:none

visibility:hidden

Reset

如果你发现错误或有其他见解，请给www.zhuei.com留言，我们会尽快更新本文！