padding 后尺寸变化 设置_input加了padding后宽度变化

demo

.content{

display: flex;

}

.box{

flex:1;

border: 1px solid #000;

}

.inputMsg{

width: 100%;

padding:0 20px;

-webkit-box-sizing: border-box;

}

.left,.right {

width:100px;

background: #ccc;

}

input的样式加入

box-sizing: border-box;//其他浏览器

-webkit-box-sizing: border-box;//谷歌

-moz-box-sizing: border-box;//火狐

box-sizing是CSS3 的属性，border-box的作用，指定宽度和高度(最小/最大属性)确定元素边框，元素指定宽度和高度包括了 padding 和 border 。也就是说，已设定的宽度和高度分别减去边框和内边距就是内容的宽度和高度。

此外还有content-box和inherit，borer-sizing属性默认为content-box，指定指定宽度和高度(最小/最大属性)确定元素边框，元素 padding 和 border在指定宽度和高度外 ，不包含在内；inherit，继承父元素的border-sizing属性。