第八章：下拉及多級彈出菜單

　　二、絕對定位和浮動的區別和運用

　　學習到現在，定位和浮動也都涉及到了，但有些朋友可能還在迷惑，兩者都可以分欄布局，到底什么時候用浮動，什么時候用定位呢？

　　當一個元素使用絕對定位后，它的位置將依據瀏覽器左上角開始計算或相對于父容器（在父容器使用相對定位時）。 絕對定位使元素脫離文檔流，因此不占據空間。普通文檔流中元素的布局就當絕對定位的元素不存在時一樣。因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素。

　　而浮動元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間。它只是改變了文檔流的顯示，而沒有脫離文檔流，理解了這一點，就很容易弄明白什么時候用定位，什么時候用浮動了。

　　一個元素浮動或絕對定位后，它將自動轉換為塊級元素，而不論該元素本身是什么類型。

　　三、 css自適應寬度滑動門菜單

　　CSS自適應寬度菜單指菜單的寬度可以隨著內容的增加而變寬，就拿上邊的實例來說，是按4個字的寬度來設計的，如果其中一項為5個字或更多，就放不下了。那么我們就需要讓它的寬度可以隨著內容的增減而變化，這就是css自適應寬度菜單。下面我們講一下自適應寬度按鈕，和菜單原理是一樣，因為自適應寬度菜單在《新手常見問題》中已經講過了，如果學會自適應按鈕，你還不會制作自適應菜單的話，請閱讀http://www.aa25.cn/div_css/898.shtml。

　　你是否還記得在第五章時學習的css按鈕實例（如下圖），當時只做了一個按鈕，它這里是三個按鈕，而且寬度不一樣，今天我們還以這個按鈕為基礎，制作寬度自應適應的按鈕。

　　那么它的實現原來是什么？我們看下邊一張圖。要想實現自適應寬度，需要在文字上增加一個輔助標簽，如span，分別在a上和span上設置背景，一個左側對齊，一個右側對齊，如下的原理圖，

　　四條輔助線內為一個按鈕元素，綠色部分為span，然后定義它的背景圖片靠右側對齊，而左側的部分為a的背景圖片，定義靠左側對齊。當文字多時，會把span撐開，這實現了自適應寬度的按鈕了。這里需要一張如下的圖片，它的寬度要寬于你所應用的最寬寬度，這樣才能顯示正常，同時根據以前學習的css Sprites技術，把背景圖片和鼠標經過圖片放到一張圖片上。

　　拿第五章css按鈕的例子代碼進行修改，先改為背景圖片使用上圖，再增加兩個字數不等按鈕，并在文字上增加span標簽

　　提示：可以先修改部分代碼后再運行

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

　　在a上增加如下代碼：

　　float:left; margin:5px;

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

　　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;}

　　對比以上代碼，可能你已經發現，原來a頂部的3px給去掉了，把高度改為37px了，行高也改為37px了，為什么這么做，大家動手試下就明白了。然后設置a下span的背景圖片，span默認是內聯元素，所以需先轉換為塊級元素；另外需增加鼠標經過時span的樣式。顯示效果如下，對比一下實例圖，是不是實現了這樣的效果。