当使用“display: block”和“ width: auto” 在按钮上,它可能会拉伸并填充其容器。然而,情况并非总是如此。特别是,现代浏览器中的按钮在这方面的行为与其他块元素不同。
这种行为背后的原因在于按钮作为替换元素的本质。被替换的元素的外观和尺寸主要不是由 CSS 决定,而是由操作系统或其他外部资源等外部因素决定。就按钮而言,它们的大小和样式通常由特定于平台的用户界面约定定义。
内在维度
替换的元素具有内在维度,这意味着它们的宽度和高度由元素本身而不是周围的内容定义。当“width: auto”应用于替换元素时,将使用该元素的固有宽度。对于按钮,此固有宽度通常对应于操作系统定义的默认按钮控件的大小。
视觉格式要求
除了固有尺寸之外,还替换了元素还可以施加视觉格式要求。对于按钮,这些要求包括标题的显示、按钮的边框和其他用户界面元素。这些格式要求会覆盖 CSS 属性的效果,例如“width: auto”和“display: block”。
结论
按钮关于“的行为display: block”和“width: auto”是它们作为被替换元素的状态的结果。它们的内在尺寸和视觉格式要求优先于 CSS 属性,导致观察到的行为是按钮并不总是拉伸以填充其容器。
以上是为什么按钮不拉伸以用'display: block”和'width: auto”填充容器?的详细内容。更多信息请关注PHP中文网其他相关文章!