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
).
块级元素始终从新行开始并占据可用的全部宽度 (尽可能向左和向右伸展)。
块级元素的示例:
<div> <h1> - <h6> <p> <form> <header> <footer> <section>
内联元素不会从新行开始,并且仅占用所需的宽度。
这是 内联 <span> 元素 在段落内。
内联元素的示例:
<span> <a> <img>
显示:无;
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
visibility:hidden
Reset
可以通过将 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>
指定元素应如何显示
指定元素是否可见