你真的了解盒模型么

2018-4-15    seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

說(shuō)到前端, 大家第一反應(yīng)是不是都是vue、react、webpack等這些大大小小的框架或者工具, 但其實(shí)這些都是和js相關(guān)的, 真正的樣式會(huì)被大家忽略。其實(shí)真正呈現(xiàn)給大家看到華麗的頁(yè)面, 都是樣式才讓他們多了那份色彩。那么大家覺(jué)得簡(jiǎn)單的css樣式, 真的簡(jiǎn)單么? 讓我們一起來(lái)看下, 開(kāi)啟css的入坑之旅, 今天一起跟大家簡(jiǎn)單聊聊盒模型的相關(guān)問(wèn)題......

盒模型

百度知道對(duì)此的解釋, 很有意思, 在此引用一下

CSS盒子模型, 內(nèi)容(CONTENT)就是盒子里裝的東西; 而填充(PADDING)就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料; 邊框(BORDER)就是盒子本身了; 至于邊界(MARGIN)則說(shuō)明盒子擺放的時(shí)候的不能全部堆在一起,要留一定空隙保持通風(fēng),同時(shí)也為了方便取出。 —— 百度知道

640?wx_fmt=png&wxfrom=5&wx_lazy=1

這段描述很有趣, 很好的解釋margin、border、padding之間的關(guān)系, 不同模式下, 盒模型的width也是不同的, 那么好, 盒模型的第一個(gè)坑來(lái)了, width的范圍問(wèn)題。

通常瀏覽器里, 盒模型的分為兩種模式, 兩種模式(怪異模式和標(biāo)準(zhǔn)模式)下width和height的值不同, 怪異模式的width和height包含border、padding和content, 而標(biāo)準(zhǔn)模式下的width和height只包含content, 這就是為啥有些瀏覽器渲染出來(lái)的dom標(biāo)簽排版會(huì)亂。解決也很簡(jiǎn)單, 在標(biāo)簽的上面, 加上doctype的設(shè)置就好了, 讓瀏覽器統(tǒng)一用同一種標(biāo)準(zhǔn)去解析頁(yè)面。 怪異模式(左圖)和標(biāo)準(zhǔn)模式(右圖)的如下:

640?wx_fmt=png

當(dāng)然, 還有用來(lái)改變盒模型width范圍的一個(gè)css3的屬性, box-sizing:

當(dāng)設(shè)置為'border-box'時(shí), width = border + padding + content;

當(dāng)設(shè)置為'content-box'時(shí), width = content。

640?wx_fmt=png


    
  1.   <div class="wrapper z1"></div>

  2.   <div class="wrapper z2"></div>


    

   .wrapper{

  1.     width: 100px;

  2.     height: 50px;

  3.     padding: 10px;

  4.     background-color: #dedede;

   }

  1. .z1{

  2.     box-sizing: border-box;

  3. }

  4. .z2{

  5.     box-sizing: content-box;

     }

那么第一個(gè)div的實(shí)際寬度為100px, 第二個(gè)div的實(shí)際寬度為120px。

說(shuō)完盒模型的padding和border, 那么再來(lái)吐槽下margin, 盒模型的margin的折疊(margin collapsing)問(wèn)題, 有些也叫外邊距合并。

通常我們說(shuō)的折疊, 都是垂直方向上的折疊, 水平方向是不存在的。標(biāo)準(zhǔn)模式下, 上下兩個(gè)兄弟的塊級(jí)元素, margin是會(huì)重疊的, 并且以最大的那個(gè)間距為準(zhǔn)(都為正數(shù))。

比如下面這段代碼:


    

   <div class="wrapper"></div>

   <div class="wrapper"></div>


    

   .wrapper{

  1.      width: 100px;

  2.      height: 50px;

  3.      margin: 10px;

  4.      background-color: #dedede;

  5.   }

640?wx_fmt=png

上圖灰色為重疊部分, 重疊10px的間距。

既然兄弟盒模型會(huì)有margin折疊, 那么父子呢? 答案是一定的, 父子也存在margin折疊的問(wèn)題, 只不過(guò)條件稍微苛刻一點(diǎn), 我們一起來(lái)看下。 父子組件的折疊觸發(fā), 要求不能有間隙, 就是父組件不能設(shè)置border或padding值, 不能有空余的內(nèi)容, 且同時(shí)有margin值, 比如下面這段代碼:


    
  1. <div class="outer">

  2.   <div class="inner"></div>

  3. </div>


    

   .outer{

  1.     width: 200px;

  2.     height: 100px;

  3.     margin: 10px;

  4.     background-color: #dedede;

   }

   .inner{

  1.      width: 100px;

  2.      height: 50px;

  3.      margin: 10px;

  4.      background-color: #bcbcbc;

   }

當(dāng)然, 折疊后的空余部分, 也是取較大值, 且折疊觸發(fā), 只存在于垂直方向。

640?wx_fmt=png

上圖灰色為重疊部分, 重疊10px的間距。

剛才提到一個(gè)詞"間隙", 如果有間隙的話是不會(huì)觸發(fā)折疊的, 比如父級(jí)元素設(shè)置了padding, 或者子元素都設(shè)置了相對(duì)定位和top值等等。如下圖:

640?wx_fmt=png

看到這里, 我想有些同學(xué)會(huì)問(wèn)了, 對(duì)于這些 margin collapsing, 有沒(méi)有一個(gè)統(tǒng)一的整理, 對(duì)于大轉(zhuǎn)轉(zhuǎn)的FEer, 我們當(dāng)然想到了大家的前面, 請(qǐng)看下面:

  • Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

  • Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

  • Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).

  • Margins of inline-block boxes do not collapse (not even with their in-flow children).

  • The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

  • The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

  • The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.

  • A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) collapse.

這是從W3C里引用的原文, 這8條規(guī)則是特殊的不折疊的情況, 簡(jiǎn)單翻譯過(guò)來(lái)(僅供參考):

  • 浮動(dòng)的盒模型不會(huì)margin折疊

  • 創(chuàng)建BFC與子不折疊

  • 設(shè)置定位的盒模型不會(huì)折疊

  • 行內(nèi)塊級(jí)元素的盒模型不折疊

  • 兄弟元素有間隙不折疊

  • 父子盒模型元素, 孩子元素有border、padding、有浮動(dòng)就不折疊

  • height為auto、min-height為0的塊級(jí)盒模型, 和它的最后一個(gè)沒(méi)有border和padding的孩子盒模型底邊距折疊, 且孩子的底部外邊距和被清除浮動(dòng)上邊距有間隙不折疊。

  • 如果min-height為0, 上下border、上下padding都為0, height為0或auto, 且沒(méi)有行內(nèi)盒模型, 他的孩子節(jié)點(diǎn)都會(huì)折疊

有點(diǎn)晦澀難懂, 大家不妨消化一下。說(shuō)到這, 再補(bǔ)充一下, 盒模型margin折疊的計(jì)算問(wèn)題, 總結(jié)了以下幾點(diǎn):

  • 同為正值時(shí), 取較大者為兩者為間距

  • 一正一負(fù)時(shí), 正負(fù)相加為間距, 若結(jié)果為負(fù)值, 則兩者部分重合

  • 都為負(fù)值時(shí), 兩者重合, 且重合部分為絕對(duì)值大者

舉個(gè)例子:


    
  1.    <div class="wrapper z-01"></div>

  2.    <div class="wrapper z-02"></div>


    
  1.    .wrapper{

  2.        width: 100px;

  3.        height: 50px;

  4.        background-color: #dedede;

  5.    }

  6.    .z-01{

  7.        margin: -10px;

  8.    }

  9.    .z-02{

  10.        margin: -15px;

  11.    }

兩者都為負(fù)值, 兩個(gè)div上下重合, 且重合間距為15px。

暫時(shí)就想到這么多, css的學(xué)習(xí)之路任重而道遠(yuǎn), 盒模型又是重中之重。上面有描述不對(duì)的地方也歡迎各位同學(xué)批評(píng)指正, 也歡迎大家來(lái)到大轉(zhuǎn)轉(zhuǎn)FE做客, 一起討論一起研究前端的技術(shù)問(wèn)題。志同道合的同學(xué), 也歡迎加入我們轉(zhuǎn)轉(zhuǎn)FE團(tuán)隊(duì), 咱們一起打拼。

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔