为什么带有 `width: 100%` 的 CSS 输入会超出其父级的边界？

宽度为 100% 的 CSS 输入超出了父级的边界

为什么会发生这种情况？

在 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中文网其他相关文章！