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