为什么块级输入元素不总是像 Div 那样填充它们的容器？

显示为块的输入元素：为什么它们与 Div 不同

使用 display: block 和宽度来感知输入元素是很常见的： auto 的行为类似于 div，占据其容器的整个宽度。然而，正如在给定的代码片段中观察到的，情况并非如此。

理解差异

与 div 不同，输入元素遵循不同的盒模型，称为边界框模型。与用于 div 的内容框模型不同，此模型在整体宽度计算中考虑了填充和边框。

克服问题

强制输入元素跨越完整的容器宽度，同时尊重其填充和边框，可以使用 max-width: 100% 属性。此技术本质上将输入元素的宽度限制为其父容器，即使计算出的宽度由于其边框和填充而超过此值。

跨浏览器兼容性

为了实现跨浏览器的一致行为，可以使用最近引入的 box-sizing: border-box 属性。此属性显式指示浏览器对目标元素使用 border-box 模型，而不管其默认框模型如何。

实现

以下代码演示了此解决方案:

<div class="wrapper">
  <input type="text" class="input" placeholder="Input Text" />
</div>

<style>
  .wrapper {
    width: 500px;
    border: 1px solid black;
    padding: 20px;
  }

  .input {
    width: 100%;
    box-sizing: border-box;
  }
</style>

这种方法确保输入元素占据所有主要容器的整个宽度浏览器。

以上是为什么块级输入元素不总是像 Div 那样填充它们的容器？的详细内容。更多信息请关注PHP中文网其他相关文章！