在 CSS 中，宽度和高度属性设置内容框的大小。但是，内边距会添加到内容框外部，从而增加元素的整体大小。
当您将内边距设置为 width: 100% 时，其内边距会使其比其包含元素的 100% 宽。
要防止 padding 影响元素的宽度或高度，请使用 box-sizing 属性设置为border-box:
box-sizing: border-box;
这使得宽度和高度属性包括内边距和边框，导致总宽度为 100%。
box -sizing具有良好的浏览器兼容性（IE8）。不需要前缀。
一些专家建议使用以下“继承”方法：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}这设置盒子大小为整个文档设置边框，并允许所有元素继承该边框设置。
这是将边框框应用于输入元素的演示：
input[type=text],
input[type=password] {
width: 100%;
box-sizing: border-box;
}以上是为什么带有 `width: 100%` 的 CSS 输入会超出其父级的边界？的详细内容。更多信息请关注PHP中文网其他相关文章！
