一句话简述border-box和content-box的区别

.login_form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 10px;
    // box-sizing: border-box;
}

设置表单时，想让表单离边缘有点距离就设置个padding: 0 10px;但是效果如下

我们会发现此时输入框已经超出边界，原因是什么呢？
因为表单盒子模型boder-sizing是设置为content-box，
content-box最大的特点是计算盒子宽高时会把padding和border的长度算进来（外边距不会算进来），故这边加了内边距自然会越界。而border-box则是你宽和高设置为多少，则这个盒子的宽高就是多少。所以我们只需把表单的border-sizing设置为border-box即可
盒子模型图：

此图截至：
动画解释 CSS 盒子模型、布局方式、box-sizing、替换元素和边距塌陷