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

Question

以前我对宽度auto的假设就像它的内容一样，但是现在有了一点知识，它的工作就像它的块全宽一样。所以我在这里与宽度100％和宽度自动混淆。任何人都可以向我描述这些与解释之间的差异吗？

Answer 1

自动宽度

  

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

宽度100％

  

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

要想象差异，请看这张图片：

Source

Answer 2

当从边距，填充或边框添加额外空间时，

• width: auto;将尽可能地尽可能地保持元素与其父容器的宽度相同。

• width: 100%;会使元素与父容器一样宽。额外的间距将添加到元素的大小而不考虑父级。这通常会导致问题。

Answer 3

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

Answer 4

只要宽度值为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/

Answer 5

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

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

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

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

Answer 6

使用width：auto; + display：inline-block;在css中发挥出色的效果。

width : auto;
display: inline-block;

Answer 7

宽度100％： 它将使内容100％。 margin，border，padding将被添加到此宽度，如果添加了任何元素，则元素将溢出。

自动宽度 它将适合可用空间中的元素，包括边距，边框和填充。调整边距+填充+边框后剩余的空间将可用宽度/高度。

宽度100％+盒子大小：边框： 它也适合可用空间中的元素，包括边框，填充（边距将使其溢出容器）。

Answer 8

当我们说

width:auto;

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

当我们说

width:100%;

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