CSS 中的 display: none, display: block 实现下拉菜单

我们在做项目时经常用到 display: none, dispaly: block，

display: inline 和 display: inline-block 可能用到的不多，但也需要了解。

大体的区别如下：

display: none, 元素不显示。

display: inline, 元素后面没有换行符，并且此时给元素设置的 width、 height 属性不生效。

display: inline-block, 元素后面没有换行符，此时给元素设置的 width、 height 属性生效。

display: block, 元素后面会有一个换行符， 给元素设置的 width、 height属性生效。

下面来一个简单的下拉菜单的例子，实现鼠标放置显示下拉菜单。

将鼠标移动到"总菜单"按钮上，就可以显示下拉子菜单。

总菜单

菜单一

菜单二

菜单三

HTML 部分：

<h2>将鼠标移动到"总菜单"按钮上，就可以显示下拉子菜单。</h2>
</br>

<div class="dropdown">
  <span>总菜单</span>
  <div class="dropdown-content">
    <p>菜单一</p>
    <p>菜单二</p>
    <p>菜单三</p>
  </div>
</div>

CSS部分：

<style>
  .dropdown {
    background-color: #01DF74;
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    position: absolute;
    display: none;  
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
  }
  .dropdown-content p:hover {
    background-color: #FACC2E;
  }
  .dropdown:hover .dropdown-content {
    display: block;  /* 由'none'变为'block',将菜单显示出来 */
  }
</style>

有个细节注意，如果将 .dropdown 的样式变为：

.dropdown {
    background-color: #01DF74;
    position: relative;
    /*display: inline-block;*/
  }

此时的页面变为：

 此时 “总菜单” 的元素能填充了一整行， 而不是根据内容填充，这也是一个细节，可能以后会用到。