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

编程问答 2022-04-30

问题描述

我正在尝试创建一个按钮 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。这个值从哪里来，因为它不在代理样式表中。

解决方法

因为默认浏览器样式是 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>

看看 box-model 和 here。

calchtmllayoutlayout