box-sizing:border-sizing||content-sizing||inherit

取值說明

1、content-box:此值為其默認值，其讓元素維持W3C的標(biāo)準(zhǔn)Box Model，也就是說元素的寬度/高度（width/height）等于元素邊框?qū)挾?#xff08;border）加上元素內(nèi)邊距（padding）加上元素內(nèi)容寬度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。

2、border-box:此值讓元素維持IE傳統(tǒng)的Box Model（IE6以下版本），也就是說元素的寬度/高度等于元素內(nèi)容的寬度/高度。（從上面Box Model介紹可知，我們這里的content width/height包含了元素的border,padding,內(nèi)容的width/height【此處的內(nèi)容寬度/高度=width/height-border-padding】）。

?

兼容瀏覽器

box-sizing現(xiàn)代瀏覽器都支持，但IE家族只有IE8版本以上才支持，雖然現(xiàn)代瀏覽器支持box-sizing，但有些瀏覽器還是需要加上自己的前綴，Mozilla需要加上-moz-，Webkit內(nèi)核需要加上-webkit-，Presto內(nèi)核-o-,IE8-ms-，所以box-sizing兼容瀏覽器時需要加上各自的前綴：著作權(quán)歸作者所有。

1 -moz-box-sizing: content-box; /*Firefox3.5+*/ 2 -webkit-box-sizing: content-box; /*Safari3.2+*/ 3 -o-box-sizing: content-box; /*Opera9.6*/ 4 -ms-box-sizing: content-box; /*IE8*/ 5 box-sizing: content-box; /*W3C標(biāo)準(zhǔn)(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c標(biāo)準(zhǔn)語法)*/

?

注：IE6，IE7不支持.為了兼容還需要為他們寫一個Hack

/*這里需要減去border的值，如果padding的值不是0還需要減去padding的值，*/
*height:15px; *width: 15px box-sizing ： content-box || border-box || inherit著作權(quán)歸作者所有。
商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
原文: http://www.w3cplus.com/content/css3-box-sizing ? w3cplus.com box-sizing ： content-box || border-box || inherit著作權(quán)歸作者所有。
商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
原文: http://www.w3cplus.com/content/css3-box-sizing ? w3cplus.com

轉(zhuǎn)載于:https://www.cnblogs.com/zwtqf/p/7682929.html

總結(jié)

以上是生活随笔為你收集整理的box_sizing的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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