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

小开

最佳答案

宽度自动

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

宽度100%

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

为了使这种差异可视化，请看下面的图片:

enter image description here

小开

只要 width 的值是 auto，元素就可以拥有水平的边距、填充和边界，而不会变得比容器更宽(当然，除非裕度-左边界-左边界-宽度 + 填充-左边界-右边界-右边界-宽度 + 边界-右边界的和大于容器)。当边距、填充和边框从容器的宽度中减去时，其内容框的宽度将是任何剩余的部分。

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

来源:

小开

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

小开

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

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

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

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

小开

enter image description here

小开

在 css 中使用 宽度: 自动; + 显示: 嵌入式块;产生了令人敬畏的效果。

如果我们有一个 div 元素，另一个也是 div 元素，并且 div 元素是块级元素，那么在一行中显示它们，使用 宽度: 自动;和 < strong > display: inline-block

小开

宽度100% : 它将使内容宽度100% 。边距、边框、填充将被添加到这个宽度，如果添加了其中任何一个元素，元素将溢出。

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

宽度100% + 方块大小: 边框: 它也将适合元素在可用空间，包括边框，填充(边距将使其溢出容器)。

小开

当我们说

width:auto;

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

当我们说

width:100%;

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

小开

对于定位元素, 宽度: 100% ，不是相对于父元素，而是最近的定位元素。

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