当我将 border-box 设置为没有特定高度和宽度的输入时，填充会增加输入的宽度。 另一方面，如果我做同样的事情，但具有既定的大小，那么它就像在常规 div 上一样正常工作，设置填充而不更改输入的宽度。
简短片段
#input1 {
box-sizing: border-box;
padding: 0 10px;
}
#input2 {
width: 200px;
height: 30px;
box-sizing: border-box;
padding: 0 50px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
input1: <input type="text" name="text" id="input1"> <br/><br/>
input2: <input type="text" name="text" id="input2">
</body>
</html>来自规格：
注意：与长度和百分比值相比，宽度和高度属性的自动值（以及后续规范中引入的其他关键字值，除非另有说明）不受 box-sizing 属性影响 ，并始终设置内容框的大小。
在第一个示例中，您没有设置任何宽度，因此它是
autobox-sizingcontent-boxborder-box因为
border-boxOutline