输入从哪里获得额外的宽度？

Question

我正在尝试创建一个按钮 div 并输入它们的容器宽度的 80%。

但是输入总是大于 80%。 为什么是这样？ 我是否需要以某种方式使用 calc 才能使其达到 80%。

即使将填充设置为 0px，它仍然更大：

https://jsfiddle.net/0rcv1ypb/

<input/>
<button></button>
<div></div>


input{
  display: block;
  width: 80%;
}
button{
  display: block;
  width: 80%;
  height: 20px;
}
div{
  width: 80%;
  height: 20px;
  background: black;
}

作为一个附带问题：输入的默认宽度似乎是 145px。 这个值来自哪里，因为它不在代理样式表中。

Answer 1

因为默认浏览器样式是box-sizing: content-box 。

重置它，所有元素都获得与预期相同的宽度，即使有不同的填充/边框。

 * { box-sizing: border-box; } input{ display: block; width: 80%; } button{ display: block; width: 80%; height: 20px; } div{ width: 80%; height: 20px; background: black; }

 <input/> <button></button> <div></div>

看看盒子模型和 这里。