以前我的假设width: auto是宽度设置为内容的宽度。现在我看到它占用了父级的整个宽度。
谁能描述一下这些之间的区别？
问问题
178813 次
9 回答
175
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.
Width 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.
To visualise the difference see this picture:
于 2013-07-04T11:11:47.330 回答
118
width: auto;当从边距、填充或边框添加额外的空间时，将尽可能努力保持元素与其父容器相同的宽度。width: 100%;将使元素与父容器一样宽。额外的间距将添加到元素的大小，而不考虑父元素。这通常会导致问题。
于 2014-03-26T16:03:51.567 回答
13
这是关于边距和边框的。如果你使用width: auto, 然后添加边框，你的 div 不会变得比它的容器大。另一方面，如果你使用width: 100%一些边框，元素的宽度将是 100% +边框或边距。有关更多信息，请参阅此。
于 2013-07-04T11:12:43.383 回答
12
宽度 100% ： 它将使内容宽度为 100%。边距、边框、填充将添加到此宽度，如果添加任何这些元素将溢出。
宽度自动： 它将适合可用空间中的元素，包括边距、边框和填充。调整边距+填充+边框后剩余的空间将可用宽度/高度。
宽度 100% + box-sizing: border box : 它还将适合可用空间中的元素，包括边框、填充（边距会使其溢出容器）。
于 2018-01-04T10:54:22.090 回答
7
只要width的值为auto，元素就可以有水平的margin、padding和border，而不会变得比它的容器更宽（当然除非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/
于 2013-07-04T11:12:17.313 回答
5
像 div 或 p 这样的块级元素的初始宽度是 auto。
使用 width:auto 撤消明确指定的宽度。
如果指定 width:100%，则元素的总宽度将是其包含块的 100% 加上任何水平边距、填充和边框。
因此，下次您发现自己将块级元素的宽度设置为 100% 以使其占据所有可用宽度时，请考虑您是否真正想要将其设置为自动。
于 2013-07-04T11:15:39.437 回答
3
当我们说
width:auto;
宽度永远不会超过父元素的总宽度。最大宽度是它的父宽度。即使我们添加了边框、内边距和边距，元素本身的内容也会变小，以便为边框、内边距和外边距留出空间。如果边框 + 填充 + 边距所需的空间大于父元素的总宽度，则内容的宽度将变为零。
当我们说
width:100%;
元素内容的宽度将变为父元素的 100%，从现在开始，如果我们添加边框、填充或边距，则会导致子元素超出父元素的宽度，并开始溢出父元素。
于 2019-11-28T18:35:44.580 回答
0
对于定位元素，宽度：100%，不是相对于父元素，而是最近的定位元素。
如果它们都是静态定位的，则它是最近的父元素。
于 2021-10-22T14:35:33.357 回答
-1
Using width:auto; + display:inline-block; in css giving awesome effect.
width : auto;
display: inline-block;
于 2016-04-14T10:09:54.473 回答