HTML样式隐藏

隐藏

css代码块

.box{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    /* 隐藏元素 */
    .hidden{
        /* 样式隐瞒 还占据位置 */
        visibility: hidden;
        /* 整个子元素隐藏 不占据位置 */
        /* display: none; */
    }
    .tab{
        width: 200px;
        height: 30px;
        padding: 5px 10px;
        background-color: black;
        color: #f1f1f1;
    }
    #view{
        width: 200px;
        height: 100px;
        margin-top:14px ;
        
        background-color: aqua;
        /* 初始化样式：为隐藏状态 */
        display: none;
    }
    /* 
    当鼠标移动到.tab 元素时，触发.tab元素#view的样式
     */
    
    .tab:hover>#view{
        /* 当鼠标移动到父元素.tab上时：显示子元素#view */
        display: block;
    }
    .box:hover{
        background-color: yellow;
    }

HTML代码块

 <div class="wraper">
        <div class="tab">
            鼠标放上来有惊喜
                <div id="view">
                        我是显示隐藏的内容
                    </div>
        </div>
        
    </div>

    <div class="hidden box"></div>
    <div class="box"></div>

解析

css隐藏方式
1.display:none 反：显示：display：block
2.height:0px; 反：显示：height:100px;
3.visibility: hidden; 特点：效果隐藏：在浏览器中占据位置
4.删除dom元素：显示时候在进行添加dom元素（***理论深）

    区别：
    display：none 彻底隐藏：所有的子元素也跟着隐藏
    visibility:hidden 样式隐藏但占据位置
    height：0px 当前元素隐藏子元素不隐藏——————>内容溢出 结合overflow：hidden：完成隐藏效果

适用于点击事件 下拉菜单等…