The width:100% and Width:auto differences between CSS

The width:100% and Width:auto differences between CSS

First, the question

The previous time in the adjustment of the tree structure, found that if the tree node name is relatively long, the IE6 will not open the outside elements, resulting in the node name only half, while the icon and name wrapping display, but in IE8 and IE9 display normal. After locating the problem, the final discovery is caused by the following properties, such as red, and setting the value of width to auto solves the problem:

. Treeview. TreeView ul{ padding:0px 0px 0px 19px; List-style:none; margin:0px 0px; width:100%;/* here is modified to auto*/ Background:url (./trstree-default-line.gif) repeat-y 0px Center; }

Ii. Conclusion

[1] width:100% does not contain the attribute value of the Margin-left margin-right, directly to the width of its parent container plus a value containing margin-left/margin-right. If margin is set, then the new width value is the width of the container plus the value of margin. (careful observation) will find added margin corresponding to the side will be more than the set of blank. and the horizontal scroll bar will be extra because the width is beyond the range of the screen. (This is body relative to the parent container).

[2] Width:auto contains the property value of Margin-left/margin-right. Its value contains the value of Margin-left/margin-right. Width:auto always occupy the whole line!!! The value of margin is already included (that is, a whole line) if you want to set the value of margin then use a whole line and subtract the value of margin to get the current width. This value is subtracted from the corresponding edge blank. The notable feature is that this does not appear as a horizontal scroll bar, which means that the width does not increase.

[3] Under the IE6 is not normal, but in IE8 and IE9 display Normal, may be IE8 and IE9 to width:100% resolution and IE6 different, but the two to Width:auto resolution is consistent.

Width:auto the element to the entire parent element width, but subtracts the size of the child node's own margin,padding or border.
width:100% will force the element to be as wide as the parent element, and add extra space to the width of the element. Because of this, it can cause a lot of problems.

Using width:100% is never a good idea. This property makes it easy to create a visual size that you are defining an element, in fact, you are making a huge change in the state of the element.

The block element fills the entire width of its parent element, because the block element defaults to Width:auto;

See the Pen Jggiu by Liqian (@liqian) on Codepen.

In the following example, the black border (border) represents the parent element of the container. Blue and green represent a child node with a red border and a border width of 20 pixels. (border:20px solid red;), the difference is that the blue child node is width:auto; the green one is width:100%;

See the Pen H2f-march-#1 by Liqian (@liqian) on Codepen.

You can see the green child nodes sticking out the parent element. This is because the green child nodes are set to width:100%, so that their width becomes the same size as the parent element, but this width does not contain the size of the child nodes ' own borders. So the border is outside the parent element;
The same is true for padding and margin.

See the Pen H2f-march-#2 by Liqian (@liqian) on Codepen.

No matter how wide the width is padding,margin or border,width:auto, the child node is not bursting into the parent element.

As you can see, width:100% is stretching the content in the box model to be the same as the parent element, and width:auto the box model like the parent element.

The solution to many CSS problems is not to add more CSS, but to remove the problematic CSS, which requires a deep understanding of the side effects of CSS styles like width.

1) width:100% does not contain the Margin-left/margin-right property value, directly takes the value of its parent container's width +margin-left/margin-right. If the DIV has a margin value set, the width value of the div = the container's +margin value. (careful observation) will find the margin value, the corresponding side will be more than the set of blank. If the parent container is body, the horizontal scroll bar is also added because it is wider than the screen, and if you set the Overflow-x:auto, the scroll bar appears when you are out of range.

2) Width:auto contains the Margin-left/margin-right property value when the width value is set.Width:auto always occupy the whole line!!! The value of the margin is already included (that is, a whole line) if you want to set the value of margin, use a whole line of Width-margin = Set the width of the element. The value minus is the blank of the corresponding edge. In this case, the salient feature is that there is no horizontal scroll bar, that is, the width does not increase. In summary, width:100%: The width of the set object is 100% of the parent element (regardless of the margin value of the set Element) Width:auto: The width is adaptive according to the actual size of the Set object (consider the margin of the set element is worth the size) For the element a1.a is a container, want a to fill its parent container, that is, 100%2.a is a container, I hope a according to the size of the element to accommodate the size of the change, with Auto 3.A is not a container, width does not know, need to display completely, with auto4. A is not a container, the width is unknown, may be larger than the width of the container, want to fill, with 100% cases as follows:

The width:100% and Width:auto differences between CSS