将宽度设置为100％时，输入文本元素流出容器元素[重复]

Posted 2023-03-06

【中文标题】将宽度设置为100％时，输入文本元素流出容器元素[重复]

【英文标题】：The input text element flow out of the container element, when setting the width to 100% [duplicate]

【发布时间】：2021-11-02 17:33:06

【问题描述】：

现在我有一个被 div 容器扭曲的输入文本元素 (form-group)

我将输入文本元素的宽度设置为 100% (width: 100%)。我希望输入文本将覆盖form-group div 元素的整个宽度。结果对我来说有点奇怪。输入的文字，喜欢它流出form-group元素，就像这里的这张图：

在这张图片中，我当前悬停form-group元素，你可以看到橙色部分，是它的边距，但是你可以看到，输入文本元素，我高亮的部分就像覆盖了边距form-group元素，证明输入文本元素是从它的容器元素流出的，也就是form-group元素。这很奇怪，至少对我来说，因为我将宽度设置为 100%，所以我认为它应该覆盖它的容器元素。请帮助我理解这一点。

我知道我可以使用overflow 属性来修复，但是我想知道为什么会这样，所以希望有人可以帮助我解决这个问题，非常感谢。

.form-container 
  background-color: black;
  padding: 20px;


.form-group 
  width: 50%;
  font-size: 1.5rem;
  background-color: red;
  margin: 3rem auto;
  display: block;


input 
  padding: 1.5rem 2rem;
  border-radius: 2px;
  border: none;
  outline: none;
  width: 100%;
  color: var(--primary-color);

<form action="#" class="form-container">
    <div class="form-group">
        <input type="text" placeholder="Enter text...">
    </div>
</form>

【问题讨论】：

我检查了你的代码，文本覆盖了整个.form-group，也许你需要清除/重置你的浏览器缓存。

【参考方案1】：

这是因为默认情况下box-sizing 属性是content-box. 当您向输入元素添加填充时，输入元素大小保持等于 form-group div 的大小。

但是，这会增加输入元素的整体宽度并将其扩展到外部，因为填充加起来等于总宽度。看起来输入元素的实际宽度增加了，但实际上只是添加了填充。 如果您愿意，可以通过将 box-sizing 更改为 border-box 来更改此设置。这样，通过妥协输入元素的实际大小，填充被添加到输入元素。

 input 
    box-sizing: border-box;
    padding: 1.5rem 2rem;
    border-radius: 2px;
    border: none;
    outline: none;
    width: 100%;
    color: var(--primary-color);

另外，添加边框后，您可以尝试在表单组 div 中添加一些高度，以可视化它们的比较高度。

在您的浏览器上使用这个开发者工具来帮助您查看宽度、内边距和边距。

【参考方案2】：

你正在反对 box-sizing。

输入添加了一个非常明显的填充（总共 3rem 水平）。虽然基本元素在 width: 100% 设置中占据其父元素的宽度，但在 CSS 中 box-sizing 默认设置为 content 。这意味着任何填充（和边框）都超出了基本尺寸。

将输入的 box-sizing 更改为 border-box 意味着填充包含在整体大小中，因此您可以获得您期望的宽度 - 总共 100% 的父项：

input 
    padding: 1.5rem 2rem;
    border-radius: 2px;
    border: none;
    outline: none;
    width: 100%;
    color: var(--primary-color);
    box-sizing: border-box; /* ADD THIS */

【参考方案3】：

在 html 中，每个元素都有默认的 padding 和 margin 属性..我们重叠了这些值。

使用以下代码..避免此类问题。

*  
padding: 0px;
margin:0px;
box-sizing:border-box;