box-sizing属性的理解

使用原因

盒模型布局中padding与border也是具有尺寸的，为避免其对页面布局产生影响，可使用box-sizing: border-box;属性设置盒模型，此时便可只用设置元素宽高即可。

属性详解

box-sizing的值有content-box、border-box、inherit。

content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框，此为默认值。

border-box：元素设定的宽度和高度决定了元素的边框盒。元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit：表示继承父元素的box-sizing属性。