What is the difference between Width:auto and width:100% in CSS?

First, Width:auto

1. The default width value of block-level elements means that the browser chooses a suitable width value for itself.

2. Width of content = ' margin-left ' + ' border-left-width ' + ' padding-left ' + ' width ' + ' padding-right ' + ' border-right-width ' + ' margin- Right

If Margin-left ' + ' border-left-width ' + ' padding-left ' + ' padding-right ' + ' border-right-width ' + ' margin-right ' is larger, Decrease the value of width, and if it is small, increase the value of width so that it satisfies the above expression.

Second, width:100%

When width is set to 100%, it is the width of the parent, and as the width of the parent changes automatically, the width of the child element is unchanged after the padding and margin are added, which is the difference from set to auto.

Iii. the difference between Width:auto and width:100%

1, width:100% does not contain the attribute value of Margin-left margin-right, directly takes the width of its parent container plus the 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. You will find that the margin corresponding to the margin will be more than the set blank. And there will be more horizontal scroll bars because the width has gone beyond the screen, (this is body relative to the parent container).

2. Width:auto contains the attribute value of Margin-left/margin-right. Width:auto always occupy the entire line, where the value of margin is already included, if you want to set the value of margin then use a whole line and then 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, General Width:auto use more, because such flexibility, and width:100% use less, because in the increase padding or margin, it is easy to make it break through the parent box, broken ring layout.

Reference: The difference between Width:auto and width:100% in CSS http://www.studyofnet.com/news/965.html

What is the difference between Width:auto and width:100% in CSS?