自动宽度和宽度之间的差异100％

以前，我的假设width: auto是将宽度设置为内容的宽度。现在，我看到它占据了父级的全部宽度。

谁能描述一下两者之间的区别？

宽度自动

像div或p这样的块级元素的初始宽度是auto。这使其扩展以占据其包含块内的所有可用水平空间。如果它具有任何水平的填充或边框，则其宽度不会加到元素的总宽度上。

宽度100％

另一方面，如果指定width：100％，则元素的总宽度将为其包含块的100％加上任何水平边距，填充和边框（除非您使用box-sizing：border-box，在这种情况下仅将边距添加到100％以更改其总宽度的计算方式）。这可能是您想要的，但很可能不是。

要显示差异，请参见以下图片：

资源

• width: auto; 当从边距，边距或边界添加额外的空间时，将尽力使一个元素与其父容器保持相同的宽度。

• width: 100%;将使元素与父容器一样宽。多余的间距将添加到元素的大小，而与父元素无关。这通常会引起问题。

这是关于边距和边界的。如果使用width: auto，然后添加边框，则div不会大于其容器。另一方面，如果使用width: 100%和一些边框，则元素的宽度将为100％+边框或边距。有关更多信息，请参见this。

只要width的值是auto，元素就可以具有水平边距，填充和边框而不会变得比其容器宽（当然，margin-left + border-left-width + padding-left + padding-right的总和+ border-right-width + margin-right大于容器）。从容器的宽度中减去边距，内边距和边框后，其内容框的宽度将为保留的宽度。

另一方面，如果指定width：100％，则元素的总宽度将为其包含块的100％加上任何水平边距，填充和边框（除非您使用box-sizing：border-box，在这种情况下仅将边距添加到100％以更改其总宽度的计算方式）。这可能是您想要的，但很可能不是。

资源：

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

像div或p这样的块级元素的初始宽度是auto。

使用width：auto撤消显式指定的宽度。

如果指定width：100％，则元素的总宽度将为其包含块的100％加上任何水平边距，边距和边框。

因此，下次您发现自己将块级元素的宽度设置为100％以使其占据所有可用宽度时，请考虑您是否真正希望将其设置为auto。

宽度100％： 将使内容含量达到100％。页边距，边框，内边距将添加到该宽度，并且如果添加了这些元素，元素将溢出。

自动宽度： 将元素放置在可用空间中，包括边距，边框和填充。调整边距+填充+边框后剩余的空间将是可用的宽度/高度。

宽度100％+框大小：border box： 它也适合元素在可用空间中，包括border，padding（边距会使它溢出容器）。

使用width：auto; + display：inline-block; 在css中产生令人敬畏的效果。

width : auto;
display: inline-block;

当我们说

width:auto;

width永远不会超过父元素的总宽度。最大宽度是其父宽度。即使我们添加边框，填充和边距，元素本身的内容也会变小，以便为边框，填充和边距留出空间。如果边框+填充+边距所需的空间大于父元素的总宽度，则内容的宽度将变为零。

当我们说

width:100%;

元素内容的宽度将变为父元素的100％，从现在开始，如果添加边框，内边距或边距，则将导致子元素超过父元素的宽度，并且将开始溢出父元素。