box-sizing:border-box區別于box-sizing:content-box，后者是標準的盒模型，前者改變了對于寬度的界定。

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

:before,
:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

(bootstrap全局中設定該樣式，據說是標準寫法)

?

先從塊級元素的盒子大小說起，通常一個塊級元素實際所占寬高度=外邊距（margin）+?邊界寬度(border-width)?+?內邊距（padding）+?高度（height）?/??寬度（width）

如果設置了border-box，實際所占寬高度?=?設置的高度（height）/?設置的寬度（width）+?外邊距（margin）；

<style>??

#div1?{box-sizing:border-box;?height:200px;?width:200px;?background:red;?margin:10px;?border:1px?solid?#000;?padding:20px;}??

#div2?{box-sizing:content-box;?height:200px;?width:200px;?background:red;?margin:10px;?border:1px?solid?#000;?padding:20px;}??

</style>??

???

<div?id="div1">border-box</div>??

<div?id="div2">content-box</div>??

設置他以后，相當于以怪異模式解析，border和padding全會在你設置的寬度內部，比如手機端設置兩行并且的布局，寬度各為50%,如果不用這個屬性，設置border后右邊的div會下來錯位，設置這個屬性，寬度還是50%而不是50%+*px,兩行可以并列顯示

轉載于:https://www.cnblogs.com/ztoz/p/5978673.html

總結

以上是生活随笔為你收集整理的box-sizing:border-box的全部內容，希望文章能夠幫你解決所遇到的問題。

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