为什么当我设置 width:100% 时输入元素的宽度会扩展其父元素的宽度？答案

【问题标题】：Why an input element's width expands its parent width when i set width:100%?为什么当我设置 width:100% 时输入元素的宽度会扩展其父元素的宽度？
【发布时间】：2023-01-13 20:10:41
【问题描述】：

我有一个 form 元素，其中包含一个 form 和一个 input。

当您运行 sn-p 时，您会发现 input 的 width 超过其父 div。

@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

body {
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),
    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  background-color: rgb(27 27 50 / 80%);
  border-radius: 0.2rem;
  height: 100vh;
  min-width: 600px;
  padding: 3rem;
}

.form-group {
  background-color: red;
}

.form-group input {
  display: block;
  width: 100%;
}

.form-group input:focus {
  outline-color: red;
  outline-width: 1px;
}

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <meta name="charset" content="utf-8" />
  <meta name="viwport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="./normalize.css" />
  <link rel="stylesheet" href="./index.css" />
  <body>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">
      Thank you for taking the time to help us improve the platform
    </p>
    <form id="survey-form">
      <div class="form-group">
        <label for="name" id="name-label"
          >Name<input
            id="name"
            type="text"
            placeholder="Enter your name"
            required
        /></label>
      </div>
    </form>
  </body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

这是因为输入类型文本具有来自浏览器的默认填充，要快速修复它，只需将 box-sizing: border-box; 添加到 .form-group input：

@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

body {
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),
    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  background-color: rgb(27 27 50 / 80%);
  border-radius: 0.2rem;
  height: 100vh;
  min-width: 600px;
  padding: 3rem;
}

.form-group {
  background-color: red;
}

.form-group input {
  display: block;
  width: 100%;
  box-sizing: border-box
}

.form-group input:focus {
  outline-color: red;
  outline-width: 1px;
}

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <meta name="charset" content="utf-8" />
  <meta name="viwport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="./normalize.css" />
  <link rel="stylesheet" href="./index.css" />
  <body>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">
      Thank you for taking the time to help us improve the platform
    </p>
    <form id="survey-form">
      <div class="form-group">
        <label for="name" id="name-label"
          >Name<input
            id="name"
            type="text"
            placeholder="Enter your name"
            required
        /></label>
      </div>
    </form>
  </body>
</html>

【讨论】：

我需要将 normalize.css 或 reset.css 附加到 html 文件吗？

【解决方案2】：

只需将 box-sizing: border-box; 添加到输入字段的 css 属性即可。默认情况下，输入字段通常会添加填充。

【讨论】：