显示
display: block;块状元素显示
display: inline;行内元素显示
display: inline-block;行内块状元素显示
display: flexbox;弹性盒子 当元素的总宽度小于其中的元素之和时,将宽度平均分配
display: none;隐藏
定位
position: static 默认,没有定位,
position:fixed 绝对定位,相对浏览器 常见的如回到顶部和两侧的悬浮栏 不占据空间直接在最上方 会遮挡下方 无法使用top
position:elative 相对定位,相对正常位置 使用top从本应存在的位置进行调整
position:absolute 绝对定位,相对不是static的父元素定位
.aoa{
position:absolute;
border: red 1px solid;
background-color: blue;
top:40px;
display: none;
}
.qaq{
position: relative;
height: 40px;
line-height: 40px;
}
.qaq:hover .aoa{
display: block;
}
<ul>
<li class="qaq"> 十几万
<div class="aoa">
<ul>
<li>123</li>
<li>456</li>
</ul>
</div>
</li>
</ul>
隐藏下拉菜单栏的简单代码