## **box-sizing的属性值** **content-box**：默认属性值，这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。在宽度和高度**之外**绘制元素的内边距和边框 对象的实际宽度等于设置的width值和border、padding之和，即width + border + padding ``` #square{ width:300px; height:300px; background:red; padding:10px; border:10px solid transparent; } ```  **border-box**：通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 ``` #square{ width:300px; height:300px; background:red; padding:10px; border:10px solid transparent; box-sizing:border-box; } ```  **inherit**：规定应从父元素继承 box-sizing 属性的值。 * box-sizing: border-box的典型应用： 创建一个width为100%，border为10px的div。 问题：不设置box-sizing的情况下，div会溢出。 解决方法：设置box-sizing: border-box。 ``` #square{ width:100%; height:100px; border:10px solid grey; box-sizing:border-box; background:red; } ```