前端盒模型知識要點

作爲前端開發最重要的一部分，CSS盒模型知識內容是必須掌握的熟知的。一般的對於這個知識點，我們需要掌握如下內容：

• 基本概念：標準模型+IE模型
• 兩種模型的區別
• 如何設置啓用兩種模型
• JS如何獲取對應盒模型的寬/高
• 什麼是邊距重疊
• 邊距重疊解決方法(BFC、IFC)

基本概念及區別講解

由於瀏覽器內核的不同及早期規則的差異，CSS中出現了兩個盒模型( W3C標準模型、IE模型 )，現在主流的新版瀏覽器統一採用W3C標準模型

W3C 盒子模型的範圍包括 margin、border、padding、content，但是盒模型的寬高值爲content部分的寬高，不包含其他部分。

而IE模型則與標準模型有着明顯的區別，IE模型將盒模型的padding和border統一歸化爲寬高的一部分：

兩種模型設置方法

標準模型：box-sizing: content-box( 默認 )
IE模型：box-sizing: border-box

EG: 對於作者而言，比較順手的是IE模型，將padding和border納入寬高額外的考慮範圍在有些時候會增加布局難度。

JS獲取盒模型寬高的多種方法及比較

• 只能取得盒模型的內聯寬/高樣式

dom.style.width/height  //只能取得盒模型的內聯寬/高樣式

• 取得盒模型渲染之後呈獻的寬高(只有IE瀏覽器支持)

dom.currentStyle.width/height  //取得盒模型渲染之後呈獻的寬高(只有IE瀏覽器支持)

• 兼容性、通用性強兼容性、通用性強

window.getComputedStyle(dom).width/height  //兼容性、通用性強

• 獲取盒模型的距視窗左定點的絕對位置

dom.getBoundingClientRect().width/height  //中間的API用於獲取盒模型的距視窗左定點的絕對位置，單純調用獲取盒模型的top、left、width、height

相對於盒模型獲得元素寬高的方法，還有一些常用的頁面寬高獲取操作，諸如以下列出的內容：

網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth

邊距重疊介紹講解

Collapsing margins,即外邊距重疊,指的是毗鄰的兩個或多個普通流中的塊元素垂直方向山的外邊距會合併爲一個外邊距.

其中所說的margin毗鄰可以歸結爲以下兩點:

• 這兩個或多個邊距沒有被非空內容,padding,border或clear分隔開
• 這些margin都處於普通文檔流中

• **EG: 在沒有被分割開的情況下,一個元素的margin-top會和它普通流第一個元素的margin-top相鄰,只有在一個元素的height是'auto'的情況下,他的margin-bottom纔會和它普通流中的最後一個元素(非浮動元素等)的margin-bottom相鄰.**( 引用自：https://segmentfault.com/a/1190000010986850 )

通俗的說，就是兩個或多個塊級盒子的垂直相鄰邊界會重合。結果顯示的邊界高度是相鄰邊界高度中最大的值。如果出現負值邊界，則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界，則從零中減去絕對值最大的負邊界。

注意：相鄰的盒子可能並非是由父子關係或同胞關係的元素生成。


但是邊界的重疊也有例外的一些情況：

• 水平邊距永遠不會重合。
• 在規範文檔中，2個或以上的塊級盒模型相鄰的垂直margin會重疊。最終的margin值計算方法如下：

a、全部都爲正值，取最大者
b、不全是正值，則都取絕對值，然後用正值減去最大值
c、沒有正值，則都取絕對值，然後用0減去最大值。
注意：相鄰的盒模型可能由DOM元素動態產生並沒有相鄰或繼承關係。

• 相鄰的盒模型中，如果其中的一個是浮動的（float），垂直margin不會重疊，並且浮動的盒模型和它的子元素之間也是這樣。
• 設置了overflow屬性的元素和它的子元素之間的margin不被重疊（overflow取值爲visible除外）。
• 設置了絕對定位（position:absolute）的盒模型，垂直margin不會被重疊，並且和他們的子元素之間也是一樣。
• 設置了display:inline-block的元素，垂直margin不會重疊，甚至和他們的子元素之間也是一樣。
• 如果一個盒模型的上下margin相鄰，這時它的margin可能重疊覆蓋（collapse through）。在這種情況下，元素的位置（position）取決於它的相鄰元素的margin是否重疊。

a、如果元素的margin和它的父元素的margin-top重疊在一起，盒模型border-top的邊界定義和它的父元素相同。
b、另外，任意元素的父元素不參與margin的重疊，或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零，那麼元素的border-top邊界位置和原來一樣。


一個應用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom重疊。


注意，那些已經被重疊覆蓋的元素的位置對其他已經重疊的元素的位置沒有任何影響；只有在對這些元素的子元素定位時，border-top邊界位置纔是必需的。

• 根元素的垂直margin不會被重疊。
  
  

BFC介紹及使用方法

BFC (Block formatting context) 「塊級格式化上下文」

BFC的主要用途就是解決邊距重疊現象帶來的影響，從上面的邊距重疊介紹中我們能夠分析出來，BFC的觸發方式如下：

【1】根元素，即HTML元素 　　
【2】float的值不爲none 　　
【3】overflow的值不爲visible
【4】display的值爲inline-block、table-cell、table-caption
【5】position的值爲absolute或fixed

具體的邊距重疊案例展示推薦閱讀 https://blog.csdn.net/TWFKXP/article/details/80574987

至於IFC，作者這裏就省略不多家描述，想要了解的話可以自行百度…

以上內容部分參考自網絡，如有錯誤的地方，歡迎指出。