css属性display none和block在html文件中是如何工作的？

Question

这是我的代码，运行良好，但我的问题是在css文件中，我知道 "display "css属性非常好，它是如何工作的，但下面的代码实际上是一个下拉manu代码，{display:none}意味着什么都不会显示，{display:block}只用于内联元素。现在我的问题是，当我悬停到DropDown按钮时，它将显示我的manu,s的哪些隐藏属性的显示？

#o2 li a{ background-color: burlywood}

ul li{
    list-style-type: none;
    position: absolute;
}

ul li a{
    text-decoration: none;
    display: block;
}
#o2 li:hover .mainbtn{
    background-color: yellow;
}
#o2 li .dpbtn{
    display: none;
}
#o2 li:hover .dpbtn{
    display: block;
}

<ul id="o2">
    <li><a class="mainbtn" href="#">DropDown</a>
        <div class="dpbtn">
            <a href="#">manu1</a>
            <a href="#">manu1</a>
            <a href="#">manu1</a>
        </div>
    </li>
</ul>

Answer 1

根据你的代码，当我们悬停的时候 li - 的 .dpbtn 具有 display: block;. 当你的光标在任何内部元素上时，例如 a - 你还在徘徊 li因为 a 在里面 li，的部分。

已更新.dpbtn是div元素，如果我们不设置任何displey属性--它将默认为BLOCK，而不是noneevery元素默认是可见的，如果我们想隐藏它--我们应该使用display none。

在使用display none之后，我们应该为:hover动作重写这个行为。

如果你在case文件中给出了这个属性，那么显示块对所有元素都有效。有很多元素默认都是块状显示的，比如h和p，div和section。比如h和p，div和section......。但是如果你让它们不显示，那么可能在某些时候你需要让它们再次显示块。所以显示块对内联元素和块元素都有效。 @Atul