html - 宽度自动和宽度 100% 之间的区别

Question

之前我对 width: auto 的假设是宽度设置为内容的宽度。现在我看到它占据了父级的整个宽度。

谁能描述一下它们之间的区别？

Answer 1

宽度自动

The initial width of a block level element like div or p is auto. This makes it expand to occupy all available horizontal space within its containing block. If it has any horizontal padding or border, the widths of those do not add to the total width of the element.

宽度 100%

On the other hand, if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border (unless you’ve used box-sizing:border-box, in which case only margins are added to the 100% to change how its total width is calculated). This may be what you want, but most likely it isn’t.

要形象化差异，请看这张图片:

Source