宽度自动和宽度之间的差100％ [英] difference between width auto and width 100 percent
问题描述
以前，我关于宽度auto的假设好像它的内容，但现在有一点知识，它的工作，就像它的块全宽。所以我很困惑这里的宽度100％和宽度自动。
Previously my assumption about the width auto works as if its contents are but now with a little knowledge no it works as if its block full width. So I'm confused here with the width 100% and the width auto. Can anyone please describe me about differences between these with explanation?
推荐答案
宽度自动
像div或p这样的块级元素的初始宽度是自动的。这使得它扩展以占据其包含块内的所有可用水平空间。如果它有任何水平填充或边框，那些宽度不会添加到元素的总宽度。
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％
另一方面，如果指定width：100％，那么元素的总宽度将是其包含块的100％加上任何水平边距，填充和边框（除非您已使用box-sizing：border-box，在这种情况下只有边距被添加到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.
要显示差异，请看这张图片：
To visualise the difference see this picture:
>
这篇关于宽度自动和宽度之间的差100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
