为什么“display: block”和“width: auto”不能拉伸按钮来填充容器？

当使用“display: block”和“ width: auto” 在按钮上，它可能会拉伸并填充其容器。然而，情况并非总是如此。特别是，现代浏览器中的按钮在这方面的行为与其他块元素不同。

这种行为背后的原因在于按钮作为替换元素的本质。被替换的元素的外观和尺寸主要不是由 CSS 决定，而是由操作系统或其他外部资源等外部因素决定。就按钮而言，它们的大小和样式通常由特定于平台的用户界面约定定义。

内在维度

替换元素具有内在维度，这意味着它们的宽度和高度由元素本身而不是周围的内容定义。当“width: auto”应用于替换元素时，将使用该元素的固有宽度。对于按钮，此固有宽度通常对应于操作系统定义的默认按钮控件的大小。

视觉格式要求

除了固有尺寸之外，还替换了元素还可以施加视觉格式要求。对于按钮，这些要求包括标题的显示、按钮的边框和其他用户界面元素。这些格式要求会覆盖 CSS 属性的效果，例如“width: auto”和“display: block”。

结论

按钮关于“的行为display: block”和“width: auto”是它们作为被替换元素的状态的结果。它们的内在尺寸和视觉格式要求优先于 CSS 属性，导致观察到按钮并不总是拉伸以填充其容器的行为。