自适应宽度（width auto）和百分之百宽度（width 100 percent）的区别

Question

之前我对于width: auto的理解是宽度被设置为内容的宽度。现在我发现它实际上会占据父元素的全部宽度。

请问有人可以描述一下它们之间的区别吗？

- Navin Rauniyar

---

可能是设置width:auto会导致width:100%的重复问题。 - Adriano Repetti

简而言之： 1）auto，父级div的宽度/高度将是其子元素的总和。 2）100％，其宽度/高度将是其父级的宽度/高度。参见文章这里。 - Alan Dong

Answer 1

宽度自适应

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

宽度100%

另一方面，如果指定width:100％，则元素的总宽度将是其包含块的100％加上任何水平边距、填充和边框（除非使用box-sizing:border-box，此时只有边距会添加到100％来更改总宽度的计算方式）。这可能是您想要的，但很可能不是。

可以通过以下图片来形象化区别:

来源

- Bhojendra Rauniyar

---

对于那些好奇width: autoдёєд»Ђд№€дјљжњ‰иї™з§ЌиЎЊдёєзљ„дєєпјљhttps://dev59.com/questions/9ofca4cB1Zd3GeqPk5dK#28354270 - Hashem Qolami

所以 auto 和 fill-available 是一样的。 - jiggunjer

所以基本上它与元素内容的大小无关，而完全是指父元素的宽度？ - haemse

但是我们只有在将box-sizing设置为content-box时才会注意到这种行为。 - Aditya Singh

Answer 2

• width: auto;会尽可能保持元素宽度与其父容器相同，当外边距、内边距或边框增加时。

• width: 100%;将使元素的宽度与父容器一样宽。将忽略父元素大小而向元素的尺寸添加额外空间。这通常会引起问题。

- Ian Jennings

---

与@C-link提供的相同内容，但增加了更多的图形界面。因此+1。 - Navin Rauniyar

但是只有在box-sizing未设置为border-box时才会发生这种情况。 - Aditya Singh

Answer 3

宽度100%: 此设置将使内容宽度为100%。边距、边框和内边距会被添加到此宽度中，如果有任何一个超出了元素的大小，它将溢出。

宽度自动: 此设置将使元素适应可用空间，包括边距、边框和内边距。调整边距+内边距+边框后剩余的空间将成为可用的宽度/高度。

宽度100% + box-sizing: border-box: 此设置也将使元素适应可用空间，包括边框和内边距（但边距可能会使其溢出容器）。

- Nishant Baranwal

Answer 4

这篇文章涉及到外边距(margin)和边框(border)。如果你使用 width: auto，然后添加上边框(border)，你的div元素不会比其容器更大。但是，如果你使用width: 100%加上一些边框(border)，元素的宽度将是100%+ 边框(border)或外边距(margin)。了解更多信息，请参见这里。

- Mateusz

Answer 5

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

- Gokul Gopala Krishnan

Answer 6

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

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

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

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

- Michael Unterthurner

Answer 7

当我们说

width:auto;

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

当我们说

width:100%;

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

- Santosh Kadam

Answer 8

关于元素的定位，宽度应该设置为100%，不是相对于父元素，而是相对于最近的已定位元素。

如果它们都是静态定位的，则是最近的父元素。

- weiya ou

Answer 9

在CSS中使用width:auto; + display:inline-block;可以产生很棒的效果。

• width : auto;使元素宽度自适应，可以与另一个对象一起调整，使用display: inline-block;，例如如果我们有一个div元素和另一个也是div元素，并且div元素是块级元素，因此将它们显示在同一行中使用width: auto;和display:inline-block

- Mohammed Javed

---

这并没有回答100％和auto之间的区别的问题。 - JoeTidee

是的，我知道，但我在这里想展示关于宽度：自动和显示：内联块的内容。当我们想要自动增加任何块级元素的宽度时，我们可以使用这个方法。 还有100%和自动之间的区别。 - Mohammed Javed