在前端开发中，输入框的样式调整是非常常见的需求。然而，在改变输入框的宽度时，我们经常会发现输入框的样式出现了问题，比如输入框的宽度不够、输入框中的文字超出了输入框的边框等等。这个问题的根本在于我们没有正确处理输入框的盒模型，也就是 box-sizing。
box-sizing
所谓盒模型，就是指网页中的所有元素都可以看作是一个矩形的盒子，可以包含内容、填充以及边框。在 CSS 中，每个元素都有一个盒模型，它由内容区域、内边距、边框和外边距组成。
默认情况下，一个元素的宽度和高度仅包括内容区域，不包括边框和内边距。但是，我们可以通过改变 box-sizing 属性来改变元素的盒模型。box-sizing 属性的值可以是 content-box 或者 border-box。
content-box表示元素的宽度和高度仅包括内容区域，不包括边框和内边距。border-box表示元素的宽度和高度包括内容区域、内边距和边框。
输入框的问题
默认情况下，输入框的 box-sizing 属性为 content-box，即输入框宽度只包含内容宽度。然而，我们通常在输入框上设置一些内边距和边框，但是这些内边距和边框会加到宽度上，导致最终显示的宽度大于我们设置的宽度。
此时，我们可以将输入框的 box-sizing 属性设置为 border-box，这样输入框的宽度就会包含内边距和边框，不会出现宽度不够的问题。以下是一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------------------ -
------ ------
-------- -----
------- --- ----- -----
----------- -----------
-
--------
-------
------
------ ----------- --------------------
-------
-------在这个示例中，我们将 input[type="text"] 的 box-sizing 属性设置为 border-box，这样输入框的宽度就会包含内边距和边框，不会出现宽度不够的问题。
总结
通过这篇文章，我们学习到了盒模型和 box-sizing 属性的概念和用法，以及如何解决输入框的问题。在开发中，要特别注意输入框的样式问题，以免影响用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3d51148841e989400f740