box-sizing解决input溢出父元素问题

做项目时，遇到了一下问题：
当我子input框设置了
.right input { height: 30px; width: 100%; margin-top: 8px; margin-left: 3px; padding: 3px; }

可以看到input框已经放不下了，溢出了父元素的框。可能有人说设置overflow：hidden就不会啦。
但是，超过父边框的就直接隐藏起来了，我们的input框就好像硬生生的被切断了，不美观。

所以，以下就要用box-sizing这个属性来解决：

box-sizing常用有两个属性：content-box和border-box

content-box:是默认值，width和height直接决定了内容content的高度（上面我们宽度设为100%，还要加上padding和border的宽度，不撑开才怪）

border-box:width和height就已经包含了padding+border+content的宽度了，你边框、内边距设置得越多，内容也会随之缩减，最终宽度都是你设定好的那个宽度。

所以我在input的样式里面加上了 box-sizing:border-box

	.right input {
				box-sizing: border-box;
				height: 30px;
				width: 100%;
				margin-top: 8px;
				margin-right: 3px;
				padding: 3px;
			}
			

duang！！最终效果ok！