Difference between CSS width: 100% and width: Auto

Difference between CSS width: 100% and width: Auto

I. Problems

Some time ago, when I adjusted the tree structure, I found that if the node name of the fruit tree is relatively long, the elements outside are not supported under IE6, so that the node name is only half displayed, at the same time, the icon and name are displayed in a line break, but in IE8 and ie9, the display is normal. After the problem is located, it is found that it is caused by the following attributes, such as red. You can solve the problem by setting the width value to Auto:

. Treeview,. Treeview ul { Padding: 0px 0px 0px 19px; List-style: none; Margin: 0px 0px; Width: 100%;/* change it to auto */ Background: URL (./trstree-default-line.gif) Repeat-y 0px center; }

Ii. Conclusion

[1] width: 100% does not include the property value of margin-left margin-Right. It directly takes the width of its parent container and the value containing margin-left/margin-right. If margin is set, the new width value is the container width plus the margin value. (Observe carefully) you will find that the side corresponding to margin will have more blank settings. In addition, there will be more horizontal scroll bars because the width has exceeded the screen range. (This is the body relative to the parent container ).

[2] width: auto includes the property value of margin-left/margin-right. The value includes the value of margin-left/margin-right. Width: auto always occupies the entire line !!! Here, the value of margin already contains (that is, a whole line) if you want to set the value of margin, use a whole line and subtract the value of margin to get the current width. The value subtracted from the value is blank. The notable feature is that there is no horizontal scroll bar, that is, the width is not increased.

[3] The display in IE6 is abnormal, but the display in IE8 and ie9 is normal. It may be because IE8 and ie9 have different width: 100% resolutions than IE6, but the two have different width: auto resolution is consistent.