第八章：下拉及多級(jí)彈出菜單

　　二、絕對(duì)定位和浮動(dòng)的區(qū)別和運(yùn)用

　　學(xué)習(xí)到現(xiàn)在，定位和浮動(dòng)也都涉及到了，但有些朋友可能還在迷惑，兩者都可以分欄布局，到底什么時(shí)候用浮動(dòng)，什么時(shí)候用定位呢？

　　當(dāng)一個(gè)元素使用絕對(duì)定位后，它的位置將依據(jù)瀏覽器左上角開(kāi)始計(jì)算或相對(duì)于父容器（在父容器使用相對(duì)定位時(shí)）。 絕對(duì)定位使元素脫離文檔流，因此不占據(jù)空間。普通文檔流中元素的布局就當(dāng)絕對(duì)定位的元素不存在時(shí)一樣。因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其他元素。

　　而浮動(dòng)元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠(yuǎn)的移動(dòng)至左側(cè)或者右側(cè)。文字內(nèi)容會(huì)圍繞在浮動(dòng)元素周圍。當(dāng)一個(gè)元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間。它只是改變了文檔流的顯示，而沒(méi)有脫離文檔流，理解了這一點(diǎn)，就很容易弄明白什么時(shí)候用定位，什么時(shí)候用浮動(dòng)了。

　　一個(gè)元素浮動(dòng)或絕對(duì)定位后，它將自動(dòng)轉(zhuǎn)換為塊級(jí)元素，而不論該元素本身是什么類型。

　　三、 css自適應(yīng)寬度滑動(dòng)門菜單

　　CSS自適應(yīng)寬度菜單指菜單的寬度可以隨著內(nèi)容的增加而變寬，就拿上邊的實(shí)例來(lái)說(shuō)，是按4個(gè)字的寬度來(lái)設(shè)計(jì)的，如果其中一項(xiàng)為5個(gè)字或更多，就放不下了。那么我們就需要讓它的寬度可以隨著內(nèi)容的增減而變化，這就是css自適應(yīng)寬度菜單。下面我們講一下自適應(yīng)寬度按鈕，和菜單原理是一樣，因?yàn)樽赃m應(yīng)寬度菜單在《新手常見(jiàn)問(wèn)題》中已經(jīng)講過(guò)了，如果學(xué)會(huì)自適應(yīng)按鈕，你還不會(huì)制作自適應(yīng)菜單的話，請(qǐng)閱讀http://www.aa25.cn/div_css/898.shtml。

　　你是否還記得在第五章時(shí)學(xué)習(xí)的css按鈕實(shí)例（如下圖），當(dāng)時(shí)只做了一個(gè)按鈕，它這里是三個(gè)按鈕，而且寬度不一樣，今天我們還以這個(gè)按鈕為基礎(chǔ)，制作寬度自應(yīng)適應(yīng)的按鈕。

　　那么它的實(shí)現(xiàn)原來(lái)是什么？我們看下邊一張圖。要想實(shí)現(xiàn)自適應(yīng)寬度，需要在文字上增加一個(gè)輔助標(biāo)簽，如span，分別在a上和span上設(shè)置背景，一個(gè)左側(cè)對(duì)齊，一個(gè)右側(cè)對(duì)齊，如下的原理圖，

　　四條輔助線內(nèi)為一個(gè)按鈕元素，綠色部分為span，然后定義它的背景圖片靠右側(cè)對(duì)齊，而左側(cè)的部分為a的背景圖片，定義靠左側(cè)對(duì)齊。當(dāng)文字多時(shí)，會(huì)把span撐開(kāi)，這實(shí)現(xiàn)了自適應(yīng)寬度的按鈕了。這里需要一張如下的圖片，它的寬度要寬于你所應(yīng)用的最寬寬度，這樣才能顯示正常，同時(shí)根據(jù)以前學(xué)習(xí)的css Sprites技術(shù)，把背景圖片和鼠標(biāo)經(jīng)過(guò)圖片放到一張圖片上。

　　拿第五章css按鈕的例子代碼進(jìn)行修改，先改為背景圖片使用上圖，再增加兩個(gè)字?jǐn)?shù)不等按鈕，并在文字上增加span標(biāo)簽

　　提示：可以先修改部分代碼后再運(yùn)行

　　預(yù)覽顯示效果如下所示，因背景圖片比較長(zhǎng)，所以右側(cè)顯示不太友好，下一步就需要把a(bǔ)的寬度給去掉，設(shè)置span的背景，使右側(cè)顯示正常，另外把三個(gè)按鈕橫向排列

　　在a上增加如下代碼：

　　float:left; margin:5px;

　　橫向排列，并增加5px的外邊距，現(xiàn)在看下效果吧。為了美觀，下一步需要a的左側(cè)增加填充，使文字不死貼左側(cè)，同理span右側(cè)需要增加一個(gè)同樣的填充。

　　a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }

　　a span { display:block; background: url(btn_bg.gif) no-repeat right 0px; padding-right:20px;}

　　a:hover { background: url(btn_bg.gif) no-repeat 0px -37px;}

　　a:hover span{ background: url(btn_bg.gif) no-repeat right -37px;}

　　對(duì)比以上代碼，可能你已經(jīng)發(fā)現(xiàn)，原來(lái)a頂部的3px給去掉了，把高度改為37px了，行高也改為37px了，為什么這么做，大家動(dòng)手試下就明白了。然后設(shè)置a下span的背景圖片，span默認(rèn)是內(nèi)聯(lián)元素，所以需先轉(zhuǎn)換為塊級(jí)元素；另外需增加鼠標(biāo)經(jīng)過(guò)時(shí)span的樣式。顯示效果如下，對(duì)比一下實(shí)例圖，是不是實(shí)現(xiàn)了這樣的效果。