CSS3学习(五):display 属性
display
属性是用于控制布局的最重要的 CSS 属性。
display 属性
display
属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display
值,具体取决于它的元素类型。大多数元素的默认 display
值为 block
或 inline
。
block
为块级元素(block element)- 块级元素总是从新行开始,并占据可用的全部宽度
inline
为行内元素(inline element)- 内联元素不从新行开始,仅占用所需的宽度。
display: none;
display: none;
通常与 JavaScript 一起使用,以隐藏和显示元素,而无需删除和重新创建它们。
默认情况下,<script> 元素使用 display: none;
。
覆盖默认的 display 值
如前所述,每个元素都有一个默认 display
值。但是,您可以覆盖它。
将行内元素更改为块元素,反之亦然,对于使页面以特定方式显示同时仍遵循 Web 标准很有用。
一个常见的例子是为实现水平菜单而生成行内的 li
元素:
li {
display: inline;
}
设置元素的 display 属性仅会更改元素的显示方式,而不会更改元素的种类。因此,带有 display: block; 的行内元素不允许在其中包含其他块元素。
隐藏元素
通过将 display
属性设置为 none
可以隐藏元素。
visibility:hidden;
也可以隐藏元素。
区别:
display: none;
该元素将被隐藏,并且页面将显示为好像该元素不在其中。visibility:hidden;
该元素将被隐藏,但该元素仍将占用与之前相同的空间,仍会影响布局。