如何防止 CSS 输入'width: 100%”超出父边界？

CSS 输入宽度：100% 超出父级边界

在 CSS 中，元素的宽度和高度应用于其内容区域，包括填充。但是，将内边距设置为 100% 宽度的元素可能会导致其超过其父级的大小。

理解 CSS 基本盒模型

CSS 基本盒模型定义元素的大小和布局被计算。它由内容、内边距、边框和边距组成。

应用 width: 100% 时，它会影响内容区域的宽度。但如果元素有内边距，它就会超出内容区域，从而有效地增加其整体大小。

打破内边距障碍

要防止内边距影响元素的宽度和高度，请设置框-sizing CSS property to border-box:

box-sizing: border-box;

这指示浏览器包含元素宽度和高度的填充innerhalb，防止它超出父级的边界。

浏览器兼容性

所有主流浏览器都支持 box-sizing，但请考虑对旧版本的 Internet Explorer（版本 8 之前的版本）使用前缀。

在上下文中使用 box-sizing

要解决您提供的 JSFiddle 中的问题，请添加 box-sizing: border-box;遵循以下规则：

input[type=text],
input[type=password] {
  box-sizing: border-box;
}

推荐的“继承”用法

Paul Irish 和 Chris Coyier 建议从 html 元素继承 box-sizing，以确保整个页面的一致性：

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

以上是如何防止 CSS 输入'width: 100%”超出父边界？的详细内容。更多信息请关注PHP中文网其他相关文章！