顯示控制隱藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            a{
                background-color: #bfa;
                
                /*
                 * 將一個(gè)內(nèi)聯(lián)元素變成塊元素,
                 *  通過display樣式可以修改元素的類型
                 *      可選值:
                 *          inline:可以將一個(gè)元素作為內(nèi)聯(lián)元素顯示
                 *          block: 可以將一個(gè)元素設(shè)置塊元素顯示
                 *          inline-block:將一個(gè)元素轉(zhuǎn)換為行內(nèi)塊元素
                 *                  - 可以使一個(gè)元素既有行內(nèi)元素的特點(diǎn)又有塊元素的特點(diǎn)
                 *                      既可以設(shè)置寬高,又不會(huì)獨(dú)占一行
                 *          none: 不顯示元素,并且元素不會(huì)在頁面中繼續(xù)占有位置
                 */
                display: none;
                
                /*為其設(shè)置一個(gè)寬和高*/
                width: 500px;
                height: 500px;
            }
            
            .box{
                width: 100px;
                height: 100px;
                background-color: orange;
                
                /*
                 * display: none;
                 *  使用該方式隱藏的元素,不會(huì)在頁面中顯示,并且不再占據(jù)頁面的位置
                 */
                /*display: none;*/
                
                /*
                 * visibility
                 *  - 可以用來設(shè)置元素的隱藏和顯示的狀態(tài)
                 *  - 可選值:
                 *      visible 默認(rèn)值,元素默認(rèn)會(huì)在頁面顯示
                 *      hidden 元素會(huì)隱藏不顯示 
                 * 
                 * 使用 visibility:hidden;隱藏的元素雖然不會(huì)在頁面中顯示,
                 *      但是它的位置會(huì)依然保持
                 */
                visibility:hidden ;
            }
            
        </style>
    </head>
    <body>
        
        <div class="box"></div>
        
        <a href="#">我是一個(gè)大大的超鏈接</a>
        
        <span>hello</span>
        
    </body>
</html>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容