因為padding和border寬度導致子元素超過父元素的解決方法

在 CSS 盒子模型的默認定義里，對一個元素所設置的 width 與 height 只會應用到這個元素的內容區。如果這個元素有任何的 border 或 padding ，繪制到屏幕上時的盒子寬度和高度會加上設置的邊框和內邊距值。

如對child container賦予如下的css，最終的樣式將會變成這樣。

.child{
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}

為了讓子元素被完全包在父元素中，可以這樣修改代碼。

但如果每一層都要這樣，豈不是過于麻煩。為了簡單方便解決這個問題，就要用到css中一個叫‘box-sizing’的屬性，‘box-sizing’有content-box和border-box兩個值，一般的盒子模型默認是content-box，所以我們只要將子組件的box-sizing改為寬度包含border和padding的border-box就可以了。

.child{
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}