box-sizing

box-sizing有两个值

• content-box 是默认值。 默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）
• border-box width 和 height 属性包括内容，内边距和边框，但不包括外边距

盒子溢出

查看元素

/* 文本框的样式 */
.input{
  width: 100%;
  padding: 20px;
}

文本框的宽度就超过了父元素的宽度，因为box-sizing默认是content-box，width是不包含padding的，100%的width加上20px的padding就超出了，设置为border-box即可。

.input{
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

border-box