在講box-sizing這個屬性之前我們先來回顧一下CSS中的盒子模型
盒子模型
不同部分的說明：
-
Margin(外邊距) - 清除邊框外的區(qū)域崖蜜，外邊距是透明的舵变。 -
Border(邊框) - 圍繞在內邊距和內容外的邊框。 -
Padding(內邊距) - 清除內容周圍的區(qū)域逸月，內邊距是透明的栓撞。 -
Content(內容) - 盒子的內容，顯示文本和圖像碗硬。
那標簽元素在默認的情況下高度和寬度是怎么計算的呢瓤湘？
元素的寬度和高度
當我們指定一個標簽的寬度和高度屬性時，默認情況下恩尾，我們只是設置內容區(qū)域的寬度和高度弛说。如果你想知道完全大小的元素，還必須添加內邊距特笋，邊框和外邊距
我們舉個例子來說明
div {
background-color: #fafafa;
width: 200px;
border: 10px solid yellow;
padding: 10px;
margin: 10px;
}
那上面這個div標簽實際寬度是多少呢剃浇？讓我們來算算：
200px (寬) + 20px (左 + 右內邊距) + 20px (左 + 右邊框)+ 20px (左 + 右外邊距) = 260px
這個div最終實際占得寬度就是260px
為什么這么計算呢？這就不得不引出box-sizing這個屬性來
box-sizing
在默認情況下猎物，box-sizing的值為：content-box虎囚，代表你對一個元素所設置的 width和height 只會應用到這個元素的內容區(qū)。
如果這個元素有任何的 border蔫磨，或 padding淘讥，繪制到屏幕上時的盒子寬度和高度會加上設置的邊框和內邊距值
這使得我們調整標簽大小是必須得時刻小心，將邊框和內邊距也計算進去,不然布局可能會出錯堤如，這一點比較煩人
那box-sizing的值為：border-box很好的解決了這一點蒲列！
border-box代表你對一個元素所設置的 width和height 會應用到這個元素的邊框區(qū)窒朋。也就是說width或者height中已經包含了padding和border 的值
內容區(qū)的實際使用寬高就是減去(border + padding)的值，這樣就使的我們在大多數情況下蝗岖，很容易地設定一個元素的寬高
記住
box-sizing:content-box寬高不包含padding和border
box-sizing:border-box寬高包含padding和border的值
在平時開發(fā)中侥猩，可以統(tǒng)一使用box-sizing:border-box，這樣我們設置寬高的時候更容易一些抵赢，不容易出錯
最后 ??
好啦欺劳，以上就是我本次分享的全部內容啦，如果你覺得我的文章對你有一丟丟幫助铅鲤，那么請不要吝嗇你的贊??哦划提，阿門~
