有關盒模型的一點筆記

默認盒模型——content-box

默認盒模型下，width和height指的就是內容區塊的長寬。

而盒子的總寬度 = width + 內邊距 + 邊框 + 外邊距

默認的盒子模型的缺點是設置寬高不直觀，由於設置的寬高是內容而不是整個盒子的寬度，因此常常會出現問題。

邊框盒模型—— border-box

邊框盒模型下，設置的width和heigth將會包含內邊距和邊框

此時盒子的總寬度 = width + 外邊距

設置這種盒模型的優勢就是更直觀了，當咱們須要增長邊框或者內邊距時會包含在width之中！只要在外邊距不變的狀況下，能夠對邊框、內邊距、內容寬度進行隨意修改【設置的寬度須要小於width】。