CSS display:none和display:block的区别

在本文中，我们将介绍CSS中display:none和display:block的区别。这两个CSS属性都用于控制元素在页面中的显示方式，但它们的使用与效果有所不同。

阅读更多：CSS 教程

display:none

display:none是CSS中一种用于隐藏元素的属性。当一个元素的display属性被设置为none时，该元素将会从页面中完全消失，不占据任何空间。也就是说，它不仅在视觉上不可见，而且在文档流中也不会存在。

下面是一个示例，展示了display:none的效果：

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

<p>Hello, World!</p>

<div id="hidden">
  <h1>This is a hidden element.</h1>
</div>

<p>After the hidden element.</p>

</body>
</html>

在这个示例中，h1元素被设置为display:none。因此，它完全隐藏了，页面中的其它内容会自动填补被隐藏元素的空间。

display:block

与display:none相反，display:block用于将元素显示为块级元素。块级元素会占据一行或多行的宽度，并且总是会在新的一行开始。相对于行内元素，块级元素可以设置宽度、高度、边距和内边距。

下面是一个示例，展示了display:block的效果：

<!DOCTYPE html>
<html>
<head>
<style>
.block {
  display: block;
  width: 200px;
  background-color: lightblue;
  padding: 10px;
}
</style>
</head>
<body>

<p>Hello, World!</p>

<div class="block">
  <h1>This is a block element.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat tellus vel rutrum tincidunt.</p>
</div>

<p>After the block element.</p>

</body>
</html>

在这个示例中，div元素被设置为display:block。因此，它显示为一个块级元素，占据一行的宽度，并以lightblue背景色填充。同时，我们也可以看到块级元素可以包含多个子元素，并且可以设置自身的宽度、高度以及内外边距。