今天小編給大家分享一下css怎么實現(xiàn)鼠標懸停時顯示子元素的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

公司主營業(yè)務：成都做網(wǎng)站、網(wǎng)站建設、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出沁水免費做網(wǎng)站回饋大家。

css基礎-盒子模型+背景和列表

border-style的值：

none 無

dotted 點狀

dashed 虛線

solid 實線

double 雙實線

margin：

垂直方向兩個相鄰元素都設置了外邊距，那么外邊距會發(fā)生合并

合并高度=兩個發(fā)生合并的外邊距中的較大值

元素的實際高度=上邊框+上內邊距+內容高度+下內邊距+下邊框

元素在頁面中實際所占的高度是：上外邊距+上邊框+上內邊距+內容高度+下內邊距+下邊框+下外邊距

hover屬性實現(xiàn)鼠標懸停時顯示子元素：

    
    
    
    div {
        width: 200px;
    }
    /*補充樣式*/
    ul{
        margin-left:-36px;
    }
    li{
        display: none;
    }
    div:hover li{
        display: inline-block;
        list-style: none;
    }
    



    

        
家電
        

            
冰箱
            
空調
            
洗衣機
        
    

inline將元素顯示為內聯(lián)元素，元素前后沒有換行符

行內元素無法設置寬和高，外邊距只能設置左右的，無法設置上下的

列表demo：

    
    
    
    *{margin:0;padding:0;}
    .wrap {
        width: 220px;
        background-color:#f2f4f6;
        border:1px solid #ececec;
        margin:0 auto;
    }
    .list{
        width:100%;
        height:150px;
        background-color:#040a10;
        text-align:center;
        color:#fff;
        line-height:150px;
        font-size:20px;
        font-weight:bold;
    }
    li{
        list-style: none;
        border-bottom:1px solid #d9dde1;
        font-size:14px;
        line-height:1.5em;
        margin:0 15px;
        padding:10px 5px 5px 5px;
    }
    li:last-child{
        border-bottom:none;
    }
    



    
        
            
前端課程排列