宽度自动和宽度之间的差异100％
以前我对宽度自动工作的假设，就好像它的内容是，但现在有一点知识没有它的作品，就像它的块的全宽。 所以我很困惑，宽度为100％，宽度为auto。 任何人都可以请描述这些与解释之间的差异？
宽度自动
像div或p这样的块级元素的初始宽度是auto。 这使得它扩大到占据其包含块内的所有可用水平空间。 如果它具有任何水平填充或边框，则这些宽度不会添加到元素的总宽度。
宽度100％
另一方面，如果你指定宽度：100％，那么元素的总宽度将是其包含块的100％加上任何水平边距，填充和边框（除非你使用了框大小：边框，在这种情况下只有边缘被添加到100％，以改变其总宽度的计算方式）。 这可能是你想要的，但最有可能的不是。
要想想这个区别，请看这张图片：
资源
我在博客上写了一篇深入的文章。
width: auto; 将尽可能地努力保持元素与父容器相同的宽度，当从边距，填充或边框添加额外的空间时。
width: 100%; 将使元素与父容器一样宽。 额外的间距将被添加到元素的大小而不考虑父项。 这通常会导致问题。
这是关于利润和边界。 如果你使用width: auto ，然后添加边框，你的div不会比它的容器大。 另一方面，如果使用width: 100%和一些边框，则元素的宽度将为100％ +边框或边距。 欲了解更多信息，请参阅。
只要宽度的值是auto，元素可以有水平的边距，填充和边框而不会比它的容器更宽（除非当然，margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right大于容器）。 其内容框的宽度将是从容器宽度中减去边距，填充和边框所剩下的内容。
另一方面，如果你指定宽度：100％，那么元素的总宽度将是其包含块的100％加上任何水平边距，填充和边框（除非你使用了框大小：边框，在这种情况下只有边缘被添加到100％，以改变其总宽度的计算方式）。 这可能是你想要的，但最有可能的不是。
资源：
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
像div或p这样的块级元素的初始宽度是auto。
使用宽度：自动撤消明确指定的宽度。
如果指定宽度：100％，则元素的总宽度将为其包含块的100％加上任何水平边距，填充和边框。
所以，下一次你发现自己设置块级元素的宽度为100％，使其占用所有可用的宽度，考虑你真正想要的是将其设置为自动。
使用width：auto; + display：inline-block; 在CSS给予真棒效果。
width : auto; display: inline-block;
