今天學習了box-sizing的相關知識，解決我心中一直的困擾，理解了這個屬性是干什么的，有什么作用，下面我給大家分享一下我學習的一些心得，以及遇到的一些坑。

在CSS中，box-sizing屬性定義了用戶代理(瀏覽器)應該如何計算一個元素的總寬度和總高度。

通常情況下，在默認的CSS盒模型定義里，一個元素的寬(width)高(height)只會應用到當前元素的內容區里。如果這個元素有padding(內邊距)或border(邊框)，那么這個盒子在顯示的時候，寬高會加上內邊距和邊框的值。這就意味著我們在布局的時候，需要時刻主要到這個盒子的內邊距和邊框，尤其是在使用響應式布局的時候，這點非常煩人。因此，w3c給出了一個新屬性，box-sizing，它可以被用來調整這些煩人的特點。

box-sizing有兩個值：

• content-box：默認值，元素的寬高只用到內容區，在該元素的寬高之外繪制內邊距和邊框。
  尺寸計算公式：
  width = 內容區的寬度
  height = 內容區的高度寬度和高度的結果值都不包含內邊距(padding)和邊框(border)
• border-box： 元素的內邊距和元素寬高都是包含在寬高內的。
  尺寸計算公式：
  width = 內容區的寬度 + padding + border
  height = 內容區的高度 + padding +border

以下是根據box-sizing不同的值渲染出來的元素尺寸：

box-sizing：不同值渲染的元素

• 效果圖：

從上圖可以看出，content-box和border-box的總寬高的值是不一樣的。當屬性值為content-box時的總寬高：

• width：200 + 20x2 + 5x2 = 250px
• height: 120 + 20x2 + 5x2 = 170px

當屬性值為border-box時的總寬高：

• width：150 + 20x2 + 5x2 = 200px
• height: 70 + 20x2 + 5x2 = 120px

這里有一點值得注意的是，我在寫這個demo的時候為了方便區分兩個盒模型，我在第一個box上加了一個margin-bottom，但是我發現這個margin-bottom貌似并不影響這個寬高的結果，不論box-sizing的值是哪個。后來我在MDN上得到了結果，確定了我的猜想是正確的。

最后需要注意的是，這個屬性是CSS3的屬性，并且這個屬性是可以從父元素繼承的。以后推薦大家使用box-sizing:border-box，可以寫成：

* { box-sizing: border-box; }

這樣處理元素大小就方便的多了。

以上就是我學習這個屬性的心得，歡迎各路大神指正，有興趣的小伙伴歡迎大家一起交流。

總結

以上是生活随笔為你收集整理的check box 如何调整字体大小_CSS中关于box-sizing你可能需要知道的小知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。