CSS的width:100%和width:auto區(qū)別

CSS的width:100%和width:auto區(qū)別

一、 問題

前段時間在調(diào)整樹結(jié)構(gòu)的時候，發(fā)現(xiàn)如果樹的節(jié)點名稱比較長的話在IE6下則不會撐開外面的元素，導致節(jié)點的名稱只顯示了一半，同時圖標和名稱換行顯示了，但是在IE8和IE9下則顯示正常。定位到問題后，最終發(fā)現(xiàn)是下面的屬性導致的，如下圖紅色所致，把width的值設置為auto后即可解決問題：

二、 結(jié)論

[1] width:100% 并不包含margin-left margin-right的屬性值，直接取其父容器的寬度加上含margin-left /margin-right的值。如果設置了margin那新的width值是容器的寬度加上margin的值。（細心觀察）就會發(fā)現(xiàn)加了 margin相對應的邊就會多出設置的空白。而且會多出橫向滾動條因為寬度已經(jīng)超出了屏幕的范圍。(這條相對于父容器是body)。

[2] width:auto包含margin-left/margin-right的屬性值。其值包含margin-left /margin-right的值。width:auto總是占據(jù)整行?。?！這其中margin的值已經(jīng)包含其中了（也就是一整行）如果要設置margin的值那就用一整行然后減去margin的值就得到了現(xiàn)在的寬度了。減去的這個值就是相應邊得空白。顯著的特征是這個沒有橫向滾動條出現(xiàn)也就是寬度沒有增加。

[3] 在IE6下顯示不正常，但是在IE8和IE9下顯示正常，可能是IE8和IE9對width:100%的解析與IE6不同所致，但是兩者對width:auto的解析是一致的。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com