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

difference between width auto and width 100 percent

提问by Navin Rauniyar

Previously my assumption about width: autowas that the width is set to that of the contents. Now I see that it takes the full width of the parent.

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

Can anyone please describe the differences between these?

任何人都可以请描述这些之间的区别吗？

回答by Bhojendra Rauniyar

Width auto

宽度自动

The initial width of a block level element like div or p is auto. This makes it expand to occupy all available horizontal space within its containing block. If it has any horizontal padding or border, the widths of those do not add to the total width of the element.

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

Width 100%

宽度 100%

On the other hand, if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border (unless you've used box-sizing:border-box, in which case only margins are added to the 100% to change how its total width is calculated). This may be what you want, but most likely it isn't.

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

To visualise the difference see this picture:

要可视化差异，请参见此图：

Source

来源

回答by Ian Jennings

• width: auto;will try as hard as possible to keep an element the same width as its parent container when additional space is added from margins, padding, or borders.

• width: 100%;will make the element as wide as the parent container. Extra spacing will be added to the element's size without regards to the parent. This typically causes problems.

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

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

回答by Mateusz

It's about margins and border. If you use width: auto, then add border, your div won't become bigger than its container. On the other hand, if you use width: 100%and some border, the element's width will be 100% +border or margin. For more info see this.

这是关于边距和边框。如果你使用width: auto，然后添加边框，你的 div 不会变得比它的容器大。另一方面，如果你使用width: 100%和一些边框，元素的宽度将是 100% +边框或边距。有关更多信息，请参阅此。

回答by Gokul Gopala Krishnan

As long as the value of width is auto, the element can have horizontal margin, padding and border without becoming wider than its container (unless of course the sum of margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right is larger than the container). The width of its content box will be whatever is left when the margin, padding and border have been subtracted from the container's width.

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

On the other hand, if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border (unless you've used box-sizing:border-box, in which case only margins are added to the 100% to change how its total width is calculated). This may be what you want, but most likely it isn't.

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

Source:

来源：

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

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

回答by Nishant Baranwal

Width 100% :It will make content with 100%. margin, border, padding will be added to this width and element will overflow if any of these added.

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

Width auto :It will fit the element in available space including margin, border and padding. space remaining after adjusting margin + padding + border will be available width/ height.

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

Width 100% + box-sizing: border box :It will also fits the element in available space including border, padding (margin will make it overflow the container).

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

回答by Michael Unterthurner

The initial width of a block level element like div or p is auto.

块级元素（如 div 或 p）的初始宽度是 auto。

Use width:auto to undo explicitly specified widths.

使用 width:auto 撤消明确指定的宽度。

if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border.

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

So, next time you find yourself setting the width of a block level element to 100% to make it occupy all available width, consider if what you really want is setting it to auto.

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

回答by Mohammed Javed

Using width:auto; + display:inline-block; in css giving awesome effect.

使用宽度：自动；+ 显示：内联块；在 css 中给出了很棒的效果。

width : auto;
display: inline-block;

回答by Santosh Kadam

When we say

当我们说

width:auto;

width will never exceed the total width of parent element. Maximum width is it's parent width. Even if we add border, padding and margin, content of element itself will become smaller in order to give space for border, padding and margin. In case if space required for border + padding + margin is greater than total width of parent element then width of content will become zero.

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

When we say

当我们说

width:100%;

width of content of element will become 100% of parent element and from now if we add border, padding or margin then it will cause child element to exceed parent element's width and it will starts overflowing out of parent element.

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