The difference between CSS width:100% and width:auto

The difference between CSS width:100% and width:auto

##1. Problem

When I was adjusting the tree structure some time ago, I found that if the node name of the tree is relatively long, the outer elements will not be opened under IE6, causing only half of the node name to be displayed, and the icon and name to wrap. It is displayed, but it displays normally under IE8 and IE9. After locating the problem, it was finally discovered that it was caused by the following attributes, as shown in red in the picture below. The problem can be solved by setting the width value to auto:

.TreeView,.TreeView ul{

##padding:0px 0px 0px 19px;

list-style:none;

margin:0px 0px;

width:

100%;/*here changed to auto*/

background:url (./trstree-default-line.gif) repeat -y 0px center ;##}

2. Conclusion

[1] width:100% does not include

margin-left

margin-right The attribute value of is directly taken as the width of its parent container plus the value containing margin-left/margin-right. If margin is set, the new width value is the width of the container plus the margin value. (Observe carefully) You will find that if margin is added, the corresponding side will have more blank space. And there will be more horizontal scroll bars because the width has exceeded the scope of the screen. (This is the body relative to the parent container). [2] width:auto contains the attribute value of margin-left/margin-right. Its value contains the values ​​of margin-left / margin-right.

width:auto always occupies the entire line

! ! ! The margin value is already included (that is, a whole line). If you want to set the margin value, use a whole line and then subtract the margin value to get the current width. The subtracted value is the blank of the corresponding side. The notable feature is that no horizontal scroll bar appears, that is, the width does not increase. [3] The display is not normal under IE6, but it is displayed normally under IE8 and IE9. It may be because IE8 and IE9 have different parsing of width:100% from IE6, but The two parsing width:auto are consistent.

The above is the detailed content of The difference between CSS width:100% and width:auto. For more information, please follow other related articles on the PHP Chinese website!