为什么“显示：阻止”和“宽度：自动”不拉伸按钮来填充容器？

Question

当我设置display: block;和width:auto;上一个按钮，我期望的按钮可以拉伸以填充容器和其他块元素做。出于某种原因，至少在最新版的Chrome中没有。

谷歌搜索时，我发现很多人问同样的问题，他们对 “如何伸展按钮以填充容器？” 的回答感到满意 。 那 不是
我感兴趣的。（我完全有能力按需要扩展按钮。）检查按钮属性，包括浏览器默认施加的属性也没有帮助。

我想了解，是什么导致按钮display: block; width: auto;根据其内容而忽略并保持水平大小。

这是我的意思的证明：

button {

  display: block;

}


<button style="width: auto;">button with `display:block; width:auto;`</button>

<button style="width: 100%;">button with `display:block; width:100%`</button>

我希望按钮width:auto;也能被拉伸。

Answer 1

此来源答案的无耻复制以及可能的重复之处，从本文中提取了信息。）_

有几个元件（<input>，<select>，<button>，<img>，<object>，和<textarea>），其被认为是替换元素其外观和尺寸由外部资源中定义。（例如，操作系统，插件等）。

替换的元素可以具有固有的尺寸-
宽度和高度值，该值由元素本身而不是由文档中的周围环境定义。例如，如果图像元素的宽度设置为auto，则将使用链接图像文件的宽度。内部尺寸还定义了一个内部比例，用于确定元素的计算尺寸（如果仅指定一个尺寸）。例如，如果仅为图像元素指定宽度（例如100px），而实际图像的宽度为200像素，高度为100像素，则元素的高度将按相同的比例缩放到50px。

在CSS的控制范围之外，替换的元素还可能具有由元素施加的视觉格式要求；例如，为表单元素呈现的用户界面控件。

有了HTML5，你有一对夫妇更喜欢那些中<audio>和<canvas>及一些。

请注意，正如您将在评论的讨论中看到的那样，button它实际上并不是w3c定义的[替换元素。但是，它的行为就像在本文中进一步讨论的那样。