CSS 布局 - 显示属性


目录

    显示目录


display 属性是控制布局的最重要的 CSS 属性。


显示属性

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

每个 HTML 元素都有一个默认显示值,具体取决于类型 它是元素的。大多数元素的默认显示值为 block内联

Click to show panel

This panel contains a <div> element, which is hidden by default (display: none).

It is styled with CSS, and we use JavaScript to show it (change it to (display: block).


块级元素

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

The <div> element is a block-level element.

块级元素的示例:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

内联元素

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

这是 内联 <span> 元素 在段落内。

内联元素的示例:

<span>
<a>
<img>

HTML 语句 显示:无;

display: none; 通常与 JavaScript 一起使用来隐藏 并显示元素而不删除和重新创建它们。看看我们最后的 如果您想知道如何实现这一点,请参阅本页的示例。

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



覆盖默认显示值

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

将内联元素更改为块元素,反之亦然,对于 使页面看起来具有特定的方式,并且仍然遵循网络标准。

一个常见的示例是为水平菜单制作内联 <li> 元素:

例子

li {
  display: inline;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>


注意:设置元素的显示属性只会改变元素的显示方式, 不是它是什么类型的元素。因此,不允许使用 display: block; 的内联元素 在其中包含其他块元素。

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

例子

span {
  display: block;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<h1>Display span elements as block elements</h1>

<span>A display property with</span> <span>a value of "block" results in</span> <span>a line break between each span elements.</span>

</body>
</html>


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

例子

a {
  display: block;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
a {
  display: block;
}
</style>
</head>
<body>

<h1>Display links as block elements</h1>

<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

</body>
</html>



隐藏元素 - 显示:无或可见性:隐藏?

style="wrap">display:none

Italy

visibility:hidden

Forest

Reset

Lights

可以通过将 display 属性设置为来隐藏元素 。 该元素将被隐藏,页面将像该元素不存在一样显示 那里:

例子

h1.hidden {
  display: none;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  display: none;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>
</html>


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

但是,该元素仍将占用相同的空间 像之前一样。该元素将被隐藏,但仍然影响布局:

例子

h1.hidden {
  visibility: hidden;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  visibility: hidden;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>

</body>
</html>



更多示例

此示例演示了 display: none;与可见性:隐藏;

显示差异:无;和可见性:隐藏;

<!DOCTYPE html>
<html>
<head>
<style>
.imgbox {
  float: left;
  text-align: center;
  width: 120px;
  border: 1px solid gray;
  margin: 4px;
  padding: 6px;
}

button {
  width: 100%;
}
</style>
</head>
<body>

<h3>Difference between display:none and visiblity: hidden</h3>
<p><strong>visibility:hidden</strong> hides the element, but it still takes up space in the layout.</p>
<p><strong>display:none</strong> removes the element from the document. It does not take up any space.</p>

<div class="imgbox" id="imgbox1">Box 1<br>
  <img src="img_5terre.jpg" alt="Italy" style="width:100%">
  <button onclick="removeElement()">Remove</button>
</div>

<div class="imgbox" id="imgbox2">Box 2<br>
  <img src="img_lights.jpg" alt="Lights" style="width:100%">
  <button onclick="changeVisibility()">Hide</button>
</div>

<div class="imgbox">Box 3<br>
  <img src="img_forest.jpg" alt="Forest" style="width:100%">
  <button onclick="resetElement()">Reset All</button>
</div>

<script>
function removeElement() {
  document.getElementById("imgbox1").style.display = "none";
}

function changeVisibility() {
  document.getElementById("imgbox2").style.visibility = "hidden";
}

function resetElement() {
  document.getElementById("imgbox1").style.display = "block";
  document.getElementById("imgbox2").style.visibility = "visible";
}
</script>

</body>
</html>


此示例演示如何使用 CSS 和 JavaScript 在上显示元素 点击。

使用 CSS 和 JavaScript 来显示内容

<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}

#panel {
  display: none;
}
</style>
</head>
<body>

<p class="flip" onclick="myFunction()">Click to show panel</p>

<div id="panel">
  <p>This panel contains a div element, which is hidden by default (display: none).</p>
  <p>It is styled with CSS and we use JavaScript to show it (display: block).</p>
  <p>How it works: Notice that the p element with class="flip" has an onclick attribute attached to it. When the user clicks on the p element, a function called myFunction() is executed, which changes the style of the div with id="panel" from display:none (hidden) to display:block (visible).</p>
  <p>You will learn more about JavaScript in our JavaScript Tutorial.</p>
</div>

<script>
function myFunction() {
  document.getElementById("panel").style.display = "block";
}
</script>

</body>
</html>




CSS 显示/可见性属性

display

指定元素应如何显示

visibility

指定元素是否可见