1. 程式人生 > >CSS的width:100%和width:auto區別

CSS的width:100%和width:auto區別

[1] width:100% 並不包含margin-left margin-right的屬性值,直接取其父容器的寬度加上含margin-left /margin-right的值。如果設定了margin那新的width值是容器的寬度加上margin的值。(細心觀察)就會發現加了 margin相對應的邊就會多出設定的空白。而且會多出橫向滾動條因為寬度已經超出了螢幕的範圍。(這條相對於父容器是body)。
[2] width:auto包含margin-left/margin-right的屬性值。其值包含margin-left /margin-right的值。width:auto總是佔據整行!!!這其中margin的值已經包含其中了(也就是一整行)如果要設定margin的值那就用一整行然後減去margin的值就得到了現在的寬度了。減去的這個值就是相應邊得空白。顯著的特徵是這個沒有橫向滾動條出現也就是寬度沒有增加。
[3] 在IE6下顯示不正常,但是在IE8和IE9下顯示正常,可能是IE8和IE9對width:100%的解析與IE6不同所致,但是兩者對width:auto的解析是一致的。