[TOC] ## 1.css盒模型的基本概念 ### 1.1標準模型+IE模型 > margin border padding content ### 1.2區別 > `計算方式不同` > 標準 width = content > IE width = content + padding + border ### 1.3css 如何設置 > box-sizing : content-box (默認) > box-sizing：border-box （IE） > 補充box-sizing屬性有3種 box-sizing：inherit ## 2.js如何設置獲取盒模型對應的寬高 ``` dom.style.width --- 獲取內聯樣式的屬性 dom.currentStyle.width --- 獲取渲染后的寬高 （只有IE支持） window.getComputedStyle(dom).width --- 獲取渲染后的寬高 ~~dom.getBoundingClientRect().width --- 獲取的絕對位置 ~~ ``` ## 3.邊距重疊 ### 3.1 邊距重疊實例及什么是邊距重疊 > 元素間的margin-top與margin-bottom發生重疊 ``` 多個 <p>1</p> 標簽設置邊距 margin：20px auto 40px; 最終 p標簽之間的距離為 40px 即取margin-top與maegin-button之間的最大值 ``` ### 3.2邊距重疊的解決方案 `BFC` > 給子元素增加父元素，給父元素創建BFC ``` 如：<div style="overflow: hidden;"><p>2</p></div> ``` > 如何創建--->給父級元素設置 `overflow: hidden` ## 4.BFC ###4.1基本概念 > 塊級格式化上下文 ### 4.2原理（不理解先寫著） >內部的Box會在垂直方向，一個接一個地放置。 Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。 BFC的區域不會與float box重疊。 BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。 計算BFC的高度時，浮動元素也參與計算 ### 4.3 BFC作用 > 1. 解決邊距重疊 > 2. 解決有float元素時 元素高度超出時內容溢出的問題 >