input 设置 width:100%;时实际宽高溢出父元素容器范围
当给容器下的 input 元素设置 width:100%; 宽度时,会发现 input 会直接溢出父元素容器范围之外。
input {
width:100%;
}
导致这个情况的原因是因为盒子模型的问题,盒子模型分为 W3C 和 IE 标准盒子。input 元素默认由 W3C 标准盒子来计算宽度。
- W3C 标准盒子:
width = content width 。即设定的 width 为元素的真实宽度,不计入 border padding。
- IE 盒子:
width = content width + padding + border 。
将元素设定的 width + padding + border 加在一起算为元素的真实宽度。
由于 Input 默认为 W3C 标准盒子,这就导致了input的宽度计算除了 content,还加上了 border padding,一起导致 input 设定 width:100%时溢出了父元素容器。
这时候我们可以通过 box-sizing
属性来解决:
box-sizing: content-box|border-box|inherit;
为 input 元素添加 box-sizing:border-box;
即可解决此问题。
input{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}