## **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; } ```