The difference between 100% and auto in width. The width is 100% auto.

The difference between 100% and auto in width. The width is 100% auto.
I did a project some time ago and found that the difference between setting width to 100% and auto is too difficult. I checked some information and made a conclusion. If there is something wrong, I would like to point it out. Width: the default width of the auto block-level element. Let's take a look at The MDN explanation: the browser will calculate and select a width for The specified element. the general idea is that The browser will select a proper width value. How can we calculate it? My understanding is: the margin-left '+ 'border-left-width' + 'padding-left' + 'width' + 'padding-Right' + 'border-right-width' of the contained element' + 'margin-Right' = width of ining block. (1) if margin-left '+ 'border-left-width' + 'padding-left' + 'padding-Right' + 'border-right-width' + 'margin-right' large, reduce the value of width. If it is small, increase the value of width to satisfy the formula (1. Next let's take a look at a demo to verify: http://jsfiddle.net/guoheng/7mj05cns/ when adding sub-elements of the margin can intuitively see the width of the zoom, verify my opinion. Width: 100% my understanding is that after it is set to 100%, its width is the width of the parent level, and as the width of the parent level automatically changes, after adding the padding and margin of the child element, its width remains unchanged, which is different from setting it to auto. You can look at this demo verification: http://jsfiddle.net/guoheng/eo7L3fg7/ can see to add padding or margin to the child element will make the child element break through the parent element. Generally, auto is used more, because it is flexible, and 100% is used less, because when padding or margin is added, it is easy to break through the parent frame and break the ring layout. Reference http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/