input加了padding后宽度变化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>demo</title>
    <style>
      .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;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="left"> </div>
      <div class="box">
        <input class="inputMsg" type="text"/>
      </div>
      <div class="right"></div>
    </div>
  </body>
</html>

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属性。

input加了padding后宽度变化

推荐阅读更多精彩内容