一個二級菜單引起的思考

時間 2019-11-17

原文原文鏈接

近期發現本身css不是很好，因而又看了一遍《css權威指南》。總感受本身抓不到重點。棄療中。。。因而看看其餘書。而後學妹跟我說她的二級菜單寫得很亂。當時我內心就在想二級菜單，有何難？自認爲10分鐘能搞定。跟她要效果圖並很自大的說了句「等會兒，我寫個簡單的」。因而血案由此引起。。。css

二級菜單要實現的原效果圖是：html

（如發現雷同，不是巧合，是我從別的網頁上截屏下來的 ~_~）。既然說了簡單，確定效果沒這麼精美。可是至少基本效果和原理要實現。瀏覽器

10分鐘過去了....15分鐘過去了....這個「等會兒」貌似有點久。剛好此時學妹說晚上再找我（我兩沒在一塊兒，經過QQ聊的，住在一層樓）。我當時很淡定的回了一個：「也行」。其實心裏很不淡定，由於至今還沒實現出來，晚上來問我，我確定不能說我也不會。因而繼續研究。不知過了多長時間，終於寫出來了。。。測試

實際效果圖：字體

不要噴太早。不是搓是很是挫。。。。spa

後來晚上和學妹一塊兒交流的時候發現，其實裏面隱藏不少問題。3d

附上我實現效果的代碼：（代碼有點長，自行摺疊）code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    .clearfix:after{
        content: '.';
        height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    .clearfix{
        zoom:1;
    }
    .nav{
        position: relative;
        margin-left: 10px;
    }
    .nav a{
        display: block;
        padding: 0 10px;
        width: 80px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        color: white;
    }
    .nav li{
        float: left;
    }
    .nav>li{
        background: rgb(18, 104, 191);
        border-right: 1px solid #fff;
    }
    .nav ul{
        display: none;
        background: #ccc;
        position: absolute;
        top: 40px;
    }
    .nav ul li a{
        color: #000;
    }
    .nav li:hover {
        background: rgba(18, 104, 191, 0.8);
    }
    .parent:hover ul{
        display: block;
    }
    </style>
</head>
<body>
    <ul class="nav clearfix">
        <li>
            <a href="">首頁</a>
        </li>
        <li>
            <a href="">貸款資助</a>
        </li>
        <li class="parent">
            <a>思想教育>></a>
            <ul class="clearfix">
                <li>
                    <a href="">政治解讀</a>
                </li>
                <li>
                    <a href="">政治解讀</a>
                </li>
            </ul>
        </li>
        <li class="parent">
            <a>隊伍建設>></a>
            <ul class="clearfix">
                <li>
                    <a href="">政治解讀</a>
                </li>
                <li>
                    <a href="">政治解讀</a>
                </li>
                <li>
                    <a href="">政治解讀</a>
                </li>
                <li>
                    <a href="">政治解讀</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="">學風建設</a>
        </li>
        <li>
            <a href="">校園服務</a>
        </li>
        <li>
            <a href="">下載中心</a>
        </li>
        <li>
            <a href="">金石灘</a>
        </li>
    </ul>
</body>
</html>

總結一下：orm

1.實現橫向導航條，水平排列有兩種方法。一種是float:left，一種是display:inline-block。優勢是：都能實現該效果。htm

缺點是：都有兼容問題。

float：left。帶來的兼容問題：

（1）清除浮動：我通常經常使用的有兩種

//第一種
     .clearfix:after{
        content: '.';
        height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    .clearfix{
        zoom:1;
    }

//第二種
       .clearfix{
                overflow:hidden;
                zoom:1;
     }

我平時用的都是第一種，由於他不會出現什麼問題。可是其實我的更喜歡第二種，由於它代碼短。可是呢，第二種有些缺點：好比說我如今就不能用，由於子菜單須要經過定位溢出父元素，overflow:hidden;的話致使溢出不顯示。因此我仍是選擇用第一種。

（2）在IE6中浮動雙外邊距：產生條件：block+水平margin+float。解決方法:_display:inline;。可是由於我這沒有用到margin，因此我這也沒寫。

（3）IE6中3px偏移：當一個元素浮動，不但願相鄰段落圍繞因而設置margin-left，在IE6中產生3px偏移_height:1%;，由於這樣能夠觸發IE的haslayout。並且在IE中當高度與實際不符時，IE採用的是拉伸將子元素包含，而不是溢出。固然二級菜單中也沒用到這個。只是想到了，算總結一下吧。

其餘的關於float，還有一些兼容性，就不說太多了。

display:inline-block。帶來的兼容性。

（1）各瀏覽器關於inline-block顯示不一致。解決方法： *display:inline; /* IE六、7 block 元素 */ *zoom:1;。

（2）空白佔位符間隙。解決方法：font-size:0。可是！有些瀏覽器不支持font-size:0，Safari 仍然有5px的間隙，而IE6,7下仍然有1px的間隙。因此解決方法是：將ul元素樣式設置爲：font-size:0;/* 全部瀏覽器 */ *word-spacing:-1px;/* IE六、7 */ letter-spacing:-5px;/* Safari 等不支持字體大小爲 0 的瀏覽器, N 根據父級字體調節*/。但li的將字體樣式設置回去：font-size: 16px; letter-spacing: normal; word-spacing: normal; vertical-align:top;。

2.實現子菜單的放置位置。將子菜單絕對定位，但絕對定位相對於誰？子菜單的直接父元素，仍是祖先元素？最後個人選擇是祖先元素。 (即祖先元素:position:relative;)

緣由是：經過測試將絕對定位相對於直接父元素 (即.parent{position:relative;})或相對於祖先元素 (即.nav{position:relative;})的區別是。由於將li設置爲float:left的緣由，致使相對於祖先元素定位的時候是在父元素下方水平排列，而相對於父元素定位的時候是在父元素下方垂直排列。（top:40px；因此在下方）

其實這上面又產生一個問題：既然是相對於祖先元素排列爲何是在父元素的下方水平排列，而不是祖先元素下方水平排列？？緣由在於：我沒指定left:0;

那麼，在絕對定位的時候指定left:0與不指定left的值（默認值爲auto）有什麼區別呢？難道處理不是效果同樣的嗎？

其實不是，關於絕對定位：當元素設置爲position:absolute，top爲auto時，元素的頂端，要相對於其未定位前原本的頂端位置對齊（left:auto, right:auto也使用這個原則）。是否是平時沒注意到，認爲設置left:0與不設置left是一致的呢？

那麼引伸一個問題。當只指定position:absolute而設置top、right、bottom、left值的時候是怎麼定位的呢？是在祖先元素的左上角呢？仍是在原處？

答案是：都不是。由於默認狀況下四個值默認都是auto，根據剛剛的原則：元素的頂端，要相對於其未定位前原本的頂端位置對齊。元素在未定位前的下面一點點，其餘不變。

3.關於選擇器權重：!important(無限大)>inline(1000)>id(100)>class/僞類(10)>tag/僞元素(1)>*(0)>inherit(無)。

4.關於內容重疊問題。

若是是浮動和其餘元素的話：

當行內框與一個浮動元素重疊時，其邊框、背景、和內容都在該浮動元素「之上」顯示。

塊框與一個浮動元素重疊時，其邊框和背景在該浮動元素「之下」顯示嗎，內容在浮動元素「之上」顯示。

若是是定位致使重疊則使用z-index。注意z-index只能用於定位元素。

5.關於二級菜單中的子菜單實際要實現內容位於其父元素下方中間問題。我看了一下文章開頭網頁的源碼，他是在子菜單裏面加了個空的li。經過js計算這個li的width。我原本覺得應該在設置子菜單第一個元素的margin設置不一樣的值。可是這值怎麼來。其實我沒想好。求指導~~

除了發現這些css技術問題。其實我更想說：無論學啥，特別是學技術，要學會分享與交流。若是學妹沒問我，或許我至今認爲二級菜單是很簡單的一個效果。若是我不去完成，或許我不知道其實我連二級菜單都不會寫。若是我不交流，我會只求完成結果不求過程的實現效果卻不會如此的去思考、去實踐舉例、去講明白。

多一份分享，多一份智慧；多一份交流，多一份收穫。各位，晚安。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。