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

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

通常情況下，在默認(rèn)的CSS盒模型定義里，一個(gè)元素的寬(width)高(height)只會(huì)應(yīng)用到當(dāng)前元素的內(nèi)容區(qū)里。如果這個(gè)元素有padding(內(nèi)邊距)或border(邊框)，那么這個(gè)盒子在顯示的時(shí)候，寬高會(huì)加上內(nèi)邊距和邊框的值。這就意味著我們?cè)诓季值臅r(shí)候，需要時(shí)刻主要到這個(gè)盒子的內(nèi)邊距和邊框，尤其是在使用響應(yīng)式布局的時(shí)候，這點(diǎn)非常煩人。因此，w3c給出了一個(gè)新屬性，box-sizing，它可以被用來(lái)調(diào)整這些煩人的特點(diǎn)。

box-sizing有兩個(gè)值：

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

以下是根據(jù)box-sizing不同的值渲染出來(lái)的元素尺寸：

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

• 效果圖：

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

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

當(dāng)屬性值為border-box時(shí)的總寬高：

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

這里有一點(diǎn)值得注意的是，我在寫(xiě)這個(gè)demo的時(shí)候?yàn)榱朔奖銋^(qū)分兩個(gè)盒模型，我在第一個(gè)box上加了一個(gè)margin-bottom，但是我發(fā)現(xiàn)這個(gè)margin-bottom貌似并不影響這個(gè)寬高的結(jié)果，不論box-sizing的值是哪個(gè)。后來(lái)我在MDN上得到了結(jié)果，確定了我的猜想是正確的。

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

* { box-sizing: border-box; }

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。