CSS的 box-sizing 属性定义了用户代理应该如何计算一个元素的总宽度和高度。
CSS Demo: https://codepen.io/guitong/pen/RJpMWV
在默认的 CSS 盒模型中，你分配给元素的宽度和高度仅应用于元素的_content box_。如果元素有边框（border）或者内边距（padding），则会将其添加到元素的宽度和高度，以获得元素在屏幕上渲染的框的大小。这意味着当你设置宽度和高度时，需要去调整它们的值来允许可能会添加的边框或内边距。
box-sizing属性可以被用来调整该表现：
content-box值代表采用默认的表现。如果你将一个元素的宽度设置为100px，则该元素的_content box_将为100个像素宽，任何边框或内边距的添加将会被添加到最终渲染的宽度。border-box告诉浏览器将任何边框或内边距计算进你设置的元素的宽度和高度。如果你设置了一个元素的宽度为100px，则这100个像素将包括边框和内边距，元素的_content box_将缩小以适配额外加入的宽度。这通常会使得定义元素大小更容易。
一些专家建议web开发应该思考 routinely applying box-sizing: border-box to all elements.