CSS 布局 - display 属性

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

display 属性

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

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

css_display_js.htm

块级元素（block element）

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

这个 <div> 元素属于块级元素。

块级元素的一些例子：

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

行内元素（inline element）

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

这是段落中的 a行内 <span> 元素。

行内元素的一些例子：

  • <span>
  • <a>
  • <img>

Display: none;

display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。

默认情况下，<script> 元素使用 display: none;。

覆盖默认的 Display 值

如前所述，每个元素都有一个默认 display 值。但是，您可以覆盖它。

将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循 Web 标准很有用。

一个常见的例子是为实现水平菜单而生成行内的 <li> 元素：

实例

  1. li {
  2.   display: inline;
  3. }

注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

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

实例

  1. span {
  2.   display: block;
  3. }

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

实例

  1. a {
  2.   display: block;
  3. }

隐藏元素 - display:none 还是 visibility:hidden？

css_display.htm

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

实例

  1. h1.hidden {
  2.   display: none;
  3. }

visibility:hidden; 也可以隐藏元素。

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

实例

  1. h1.hidden {
  2.   visibility: hidden;
  3. }

更多实例

display: none; 与 visibility: hidden; 之间的差异

本例演示 display: none; VS visibility: hidden;

  1. <head>
  2. <style>
  3. .imgbox {
  4.   float: left;
  5.   text-align: center;
  6.   width: 185px;
  7.   border: 1px solid gray;
  8.   margin: 4px;
  9.   padding: 6px;
  10. }
  12. button {
  13.   width: 100%;
  14. }
  15. </style>
  16. </head>
  17. <body>
  19. <h1>display:none 与 visiblity: hidden 的区别</h1>
  20. <p><b>visibility:hidden</b> 隐藏元素，但仍占据布局中的空间。</p>
  21. <p><b>display:none</b> 从文档中删除元素。它不会占据任何空间。</p>
  23. <div class="imgbox" id="imgbox1">Box 1<br>
  24.   <img src="/uploads/i/css/photo/imgbox-1.gif" alt="Box 1" style="width:100%">
  25.   <button onclick="removeElement()">删除</button>
  26. </div>
  28. <div class="imgbox" id="imgbox2">Box 2<br>
  29.   <img src="/uploads/i/css/photo/imgbox-2.gif" alt="Box 2" style="width:100%">
  30.   <button onclick="changeVisibility()">隐藏</button>
  31. </div>
  33. <div class="imgbox">Box 3<br>
  34.   <img src="/uploads/i/css/photo/imgbox-3.gif" alt="Box 3" style="width:100%">
  35.   <button onclick="resetElement()">重置所有</button>
  36. </div>
  38. <script>
  39. function removeElement() {
  40.   document.getElementById("imgbox1").style.display = "none";
  41. }
  43. function changeVisibility() {
  44.   document.getElementById("imgbox2").style.visibility = "hidden";
  45. }
  47. function resetElement() {
  48.   document.getElementById("imgbox1").style.display = "block";
  49.   document.getElementById("imgbox2").style.visibility = "visible";
  50. }
  51. </script>
  53. </body>

结合使用 CSS 和 JavaScript 来显示内容

本例演示如何使用 CSS 和 JavaScript 在单击时显示元素。

  1. <head>
  2. <style>
  3. #panel, .flip {
  4.   font-size: 16px;
  5.   padding: 10px;
  6.   text-align: center;
  7.   background-color: #4CAF50;
  8.   color: white;
  9.   border: solid 1px #a6d8a8;
  10.   margin: auto;
  11. }
  13. #panel {
  14.   display: none;
  15. }
  16. </style>
  17. </head>
  18. <body>
  20. <p class="flip" onclick="myFunction()">点击这里来显示面板</p>
  22. <div id="panel">
  23.   <p>该面板包含一个 div 元素，默认情况下该元素是隐藏的（display: none）。</p>
  24.   <p>它使用 CSS 进行样式设置，我们使用 JavaScript 来显示它（display: block）。</p>
  25.   <p>工作原理：请注意，带有 class="flip" 的 p 元素有 onclick 属性。当用户单击 p 元素时，将执行一个名为 myFunction() 的函数，该函数将 id="panel" 的 div 样式从 display:none（隐藏）更改为 display:block（可见）。</p>
  26.   <p>您将在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识。</p>
  27. </div>
  29. <script>
  30. function myFunction() {
  31.   document.getElementById("panel").style.display = "block";
  32. }
  33. </script>
  35. </body>

CSS Display/Visibility 属性

属性 描述
display 指定应如何显示元素。
visibility 指定元素是否应该可见。