CSS盒子模型含義和原理的示例分析

  盒子模型

結(jié)果，你在審查元素時(shí)，發(fā)現(xiàn)這個(gè)元素的大小變成了240px，而不是200px了。

這是為什么呢？因?yàn)槟J(rèn)情況下，設(shè)置width 、height 等作用對(duì)象是內(nèi)容區(qū)域，所以設(shè)置的width: 200px僅僅是內(nèi)容區(qū)域的寬度，加上左右內(nèi)邊距大小，導(dǎo)致了元素的整體尺寸變大了。這和我們對(duì)現(xiàn)實(shí)世界的中盒子的認(rèn)識(shí)有差異的。比如，你我們說房子的面積，并不單單指可用面積，還要包括墻壁厚度、陽臺(tái)、電梯之類的空間的。

盒子模型和box-sizing

為了把CSS和現(xiàn)實(shí)世界對(duì)應(yīng)起來，這時(shí)候box-sizing就要用上場(chǎng)了。box-sizing是用來設(shè)置width、height的作用對(duì)象的。有三個(gè)值，分別是content-box 、 paading-box 、 border-box， 默認(rèn)值是content-box?？赡苡腥藭?huì)問，為什么沒有margin-box??？具體原因就不知道了，可以參考張?chǎng)涡窭蠋熢凇禖SS世界》一書中提到了兩個(gè)原因：

margin-box 本身沒有多大的價(jià)值

和 margin 的規(guī)范會(huì)沖突。因?yàn)閙argin規(guī)范寫著“ margin的背景永遠(yuǎn)是透明的 ”，如果來個(gè)margin-box，那background怎么辦？

至于為什么沒有margin-box就簡(jiǎn)單的提一下，有興趣的朋友可以自己去查一下。

最佳實(shí)踐

為了布局上的方便，一些專家建議我們將所有的元素都設(shè)置為box-sizing: border-box

如果不考慮低版本瀏覽器的話，可以用下面的代碼：

*,
*:before,
*:after { 
  box-sizing: border-box;
}

后來,又有專家建議用的繼承的方法，如下：

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

這種方法被稱為最佳實(shí)踐，具體原因就不說了，既然是專家推薦 ，那我們以后可以把第二種方法的段代碼放到reset.css里面的。

以上是“CSS盒子模型含義和原理的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！