码农教程 - 一技在手,衣食无忧! tools

目录

CSS 布局 - 显示属性

❮ 上一节 下一节 ❯

这个displayproperty 是控制布局最重要的 CSS 属性。

显示属性

这个display属性指定元素是否/如何显示。

每个 HTML 元素都有一个默认显示值，具体取决于元素的类型。大多数元素的默认显示值为block或者inline。

单击以显示面板

该面板包含一个 <div> 元素，默认情况下隐藏（display: none）。

它使用 CSS 设计样式，我们使用 JavaScript 来显示它（将其更改为 (display: block）。

块级元素

块级元素始终从新行开始并占据可用的全部宽度（尽可能向左和向右延伸）。

<div> 元素是块级元素。

块级元素的示例：

  • <div>
  • <h1> - <h6>
  • <p>
  • <表格>
  • <标题>
  • <页脚>
  • <部分>

内联元素

内联元素不会从新行开始，并且仅占用所需的宽度。

这是内部有一个内联 <span> 元素一个段落。

内联元素的示例：

  • <跨度>
  • <一>
  • <图片>

显示：无；

display: none;通常与 JavaScript 一起使用来隐藏和显示元素，而无需删除和重新创建它们。如果您想了解如何实现这一点，请查看本页的最后一个示例。

这个<script>元素用途display: none;作为默认值。

覆盖默认显示值

如前所述，每个元素都有一个默认显示值。但是，您可以覆盖此设置。

将内联元素更改为块元素（反之亦然）对于使页面看起来具有特定的方式非常有用，并且仍然遵循 Web 标准。

一个常见的例子是内联<li>水平菜单的元素：

示例

li {
  display: inline;
}
亲自试一试 »

笔记：设置元素的显示属性只会改变元素如何显示，而不是它是什么类型的元素。所以，一个内联元素display: block;内部不允许有其他块元素。

以下示例将 <span> 元素显示为块元素：

示例

span {
  display: block;
}
亲自试一试 »

以下示例将 <a> 元素显示为块元素：

示例

a {
  display: block;
}
亲自试一试 »

隐藏元素 - 显示：无或可见性：隐藏？

display:none

Italy

visibility:hidden

Forest

重置

Lights

隐藏元素可以通过设置display属性为none。该元素将被隐藏，页面将显示为好像该元素不存在一样：

示例

h1.hidden {
  display: none;
}
亲自试一试 »

visibility:hidden;还隐藏一个元素。

但是，该元素仍将占用与以前相同的空间。该元素将被隐藏，但仍然影响布局：

示例

h1.hidden {
  visibility: hidden;
}
亲自试一试 »

更多示例

显示差异：无；和可见性：隐藏；
此示例演示了 display: none;与可见性：隐藏；

使用 CSS 和 JavaScript 来显示内容
此示例演示如何使用 CSS 和 JavaScript 在单击时显示元素。

通过练习测试一下

练习:

隐藏 <h1> 元素。它仍应占用与以前相同的空间。

<style>
h1 {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

开始练习

CSS 显示/可见性属性

Property Description
display Specifies how an element should be displayed
visibility Specifies whether or not an element should be visible

❮ 上一节 下一节 ❯