CSS 盒子模型和百分比不一致的疯狂
在 CSS 领域， div 及其两个输入子项似乎摆脱了分配的限制。这是什么魔法？
让我们来解开这个谜团！
根据 CSS 盒子模型的原理，元素的宽度和高度在内部发挥得很好内容框。然而，内边距喜欢走出这个框，有效地放大整个元素。
将 width: 100% 应用于带有内边距的元素会赋予它不适当的余地，使其比其 100% 父级更宽。在这种情况下，输入变得比其容器更宽。
为了抑制填充的恶作剧行为，我们引入了盒子大小属性。将其设置为 border-box 可确保内边距保持在元素定义的尺寸内。
网页设计奇才 Paul Irish 和 Chris Coyier 倡导继承方法，由以下传播片段：
为了见证修复的实际效果，这里是调整后的代码：
瞧！现在，任何输入字段都不敢越界。盒子模型的理智恢复了。
以上是为什么带有'width: 100%”的 CSS 输入会超出其父级的边界？的详细内容。更多信息请关注PHP中文网其他相关文章！
