为何设置width:100%后input元素宽度超出父容器？

问题原因 #

input元素默认采用content-box盒模型，width属性仅计算内容区域的宽度。当设置width:100%时，input自带的padding和border会额外占据空间，导致总宽度超过父容器的宽度。

解决方案 #

1. 给input单独设置border-box（针对性修复）

修改input的样式，将盒模型改为border-box，此时width会包含内容、padding和border的总宽度，设置100%就不会超出父容器：

.form-group input {
  display: block;
  width: 100%;
  box-sizing: border-box; /* 新增这一行 */
  /* 可按需添加padding，比如：padding: 0.5rem; */
}

2. 全局设置border-box（通用解决方案）

在CSS开头添加全局样式，让所有元素都使用border-box盒模型，彻底避免这类宽度计算问题：

* {
  box-sizing: border-box;
}

额外优化提示 #

你的HTML代码中，meta标签被放在了head标签外部，建议将它们移到head内，确保页面渲染正常：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" 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" />
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

内容的提问来源于stack exchange，提问作者Ala Eddine Menai