CSS中margin-box怎么用

小編給大家分享一下CSS中margin-box怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

盒尺寸(Box dimensions)的4個(gè)盒子

盒尺寸由4個(gè)盒子組成，分別是content box, padding box, border box, margin box。這個(gè)和盒模型中的幾個(gè)盒子其實(shí)是對(duì)應(yīng)的。

這是他們?cè)谝?guī)范中的稱呼，當(dāng)規(guī)范落地到CSS語(yǔ)言層的時(shí)候，每個(gè)盒子都起了一個(gè)對(duì)應(yīng)的名字，如下：

content box寫做content-box；
padding box寫做padding-box；
border box寫做border-box；
margin box寫做margin-box。

因此，理論上，box-sizing可以有這么些寫法：

.box1 { box-sizing: content-box; }
.box2 { box-sizing: padding-box; }
.box3 { box-sizing: border-box; }
.box4 { box-sizing: margin-box; }

理論美好，現(xiàn)實(shí)殘酷，實(shí)際上，支持情況如下：

.box1 { box-sizing: content-box; } /* 默認(rèn)值 */.box2 { box-sizing: padding-box; } /* FireFox曾經(jīng)支持 */.box3 { box-sizing: border-box; }  /* 全線支持 */.box4 { box-sizing: margin-box; }/* 從未支持過(guò) */

margin-box被無(wú)情的拋棄了，好慘！

然而，這不是最慘的，更慘的是margin-box在整個(gè)CSS世界中都被拋棄了，沒(méi)錯(cuò)，至今為止，CSS中沒(méi)有任何屬性支持margin-box，比padding-box要慘的多，雖然padding-box在box-sizing屬性中要被拋棄，但是人家依然受到background-clip屬性的青睞。但是margin-box完全就無(wú)人問(wèn)津。

于是，難免讓人疑惑，同樣都是盒子，為何就margin-box不支持呢？

為何box-sizing不支持margin-box？

網(wǎng)上有這樣的說(shuō)法，說(shuō)margin在垂直方向有合并重疊特性，如果支持了margin-box，合并規(guī)則就要發(fā)生變更，會(huì)比較復(fù)雜。我對(duì)此觀點(diǎn)不敢茍同，其實(shí)當(dāng)下很多屬性可以滅掉margin合并，多一個(gè)box-sizing又何妨，且瀏覽器產(chǎn)商實(shí)現(xiàn)不難的，跟之前的規(guī)范也不沖突。

1. 其實(shí)，我個(gè)人認(rèn)為，不支持margin-box最大的原因是本身就沒(méi)有價(jià)值！我們不妨好好想想，一個(gè)元素，如果我們使用width或height設(shè)定好了尺寸，請(qǐng)問(wèn)，我們此時(shí)設(shè)置margin值，其offset尺寸會(huì)有變化嗎？不會(huì)啊，親們，100像素寬的元素，你再怎么設(shè)置margin，它還是100像素寬。但是，border和padding就不一樣了，100像素寬的元素，設(shè)置個(gè)20像素大小的padding值，offsetWidth就是140像素了，尺寸會(huì)變化。

   你說(shuō)，一個(gè)本身并不會(huì)改變?cè)爻叽绲暮凶樱凶?code>box-sizing支持的道理嗎？box-sizing就是改變尺寸作用規(guī)則的！

   這就好比一個(gè)已經(jīng)絕經(jīng)的大媽，有必要給她吃避孕藥嗎？

   margin只有在width為auto的時(shí)候可以改變?cè)氐某叽纾?，此時(shí)元素已經(jīng)處于流動(dòng)性狀態(tài)，根本就不需要box-sizing。

   所以，說(shuō)來(lái)說(shuō)去就是margin-box本身就沒(méi)有價(jià)值。

2. 還有一個(gè)可能的原因就是使用場(chǎng)景需求。box-sizing的margin-box效果，如果是IE10+瀏覽器，可以試試flex布局，如果要兼容IE8+可以使用“寬度分離”，或者特定場(chǎng)景下使用“格式化寬度”來(lái)實(shí)現(xiàn)，也就是并不是強(qiáng)需求。比方說(shuō)box-sizing:padding-box，就是因?yàn)槭褂脠?chǎng)景有限，就FireFox瀏覽器支持，并且是曾經(jīng)支持，從版本50開始也不支持了。

   其實(shí)，我個(gè)人覺(jué)得沒(méi)必要舍棄，瀏覽器都應(yīng)該支持，就像background屬性那樣。成為套餐不挺好的。

為何background-origin/background-clip不支持margin-box？

這個(gè)其實(shí)很好解釋，“margin的背景永遠(yuǎn)是透明的”這幾個(gè)大字可是在規(guī)范寫得清清楚楚的！

The background style of the content, padding, and border areas of a box is specified by the ‘background’ property of the generating element. Margin backgrounds are always transparent.

假如說(shuō)，例如，background-clip支持margin-box，是不是就意味著背景色背景圖片之類的可以在margin-box這個(gè)盒子上顯示，那豈不意味著“margin的背景不是透明的”！顯然和規(guī)范沖突了，我們可以打自己的臉，但是要想讓規(guī)范打自己的臉，可能嗎？

以上是“CSS中margin-box怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！