input 设置 width:100%；时实际宽高溢出父元素容器范围

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;
}