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

Question

以前我对宽度auto的假设就像它的内容一样,但是现在有了一点知识,它的工作就像它的块全宽一样.所以我在这里与宽度100%和宽度自动混淆.有谁能形容我这些与解释之间的差异？

Answer 1

宽度自动

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

宽度100%

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

要想象差异,请看这张图:

资源

Answer 2

• width: auto; 当从边距,填充或边框添加额外空间时,将尽可能努力保持元素与其父容器的宽度相同.

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

Answer 3

宽度 100% : 它将使内容为 100%。边距、边框、填充将添加到此宽度，如果添加任何这些元素，元素将溢出。

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

宽度 100% + box-sizing: border box : 它还适合可用空间中的元素，包括边框、填充（边距会使其溢出容器）。

Answer 4

这是关于利润和边界.如果你使用width: auto,然后添加边框,你的div将不会变得比它的容器大.另一方面,如果使用width: 100%某个边框,则元素的宽度将为100%+边框或边距.欲了解更多信息请参阅本.

Answer 5

只要 width 的值为 auto，元素就可以有水平边距、填充和边框，而不会变得比其容器宽（当然，除非边距左 + 边框左宽度 + 填充左 + 填充右的总和） + border-right-width + margin-right 大于容器）。当从容器的宽度中减去边距、填充和边框时，其内容框的宽度将是剩下的任何值。

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

来源：

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

Answer 6

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

\n\n

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

\n\n

如果指定 width:100%，则 element\xe2\x80\x99s 的总宽度将是其包含块的 100% 加上任何水平边距、填充和边框。

\n\n

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

\n

Answer 7

当我们说

width:auto;

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

当我们说

width:100%;

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