css盒模型

css盒模型

1、基本概念：

　　標準模型+IE模型

2、標準模型和IE模型的區別

　　計算寬度和高度的不一樣
　　標準模型寬高只包含內容，不包含padding和border width=content
　　IE模型寬高包含padding和border width=conten+padding+border

3、css如何設置這兩種模型

　　標準模型：box-sizing: content-box 瀏覽器默認
　　IE模型: box-sizing: border-box

4、js如何設置獲取盒模型對應的寬和高

　　dom.style.width/height(只能取內聯樣式的)
　　dom.currentStyle.width/height(只有IE支持)
　　window.getComputedStyle(dom).width/height
　　dom.getBoundingClientRect().width/height (ie9及以上支持)
　　兼容寫法：width = dom.getBoundingClientRect().right - left
　　　　　　　height = dom.getBoundingClientRect().bottom - top

5、根據盒模型解釋邊距重疊

6、BFC（邊距重疊解決方案）

　　BFC基本概念版：塊級格式化上下文-解決邊距重疊
　　原理-渲染規則：
　　　　1.BFC元素垂直方向邊距會發生重疊
　　　　2.BFC的區域不會與浮動元素重疊-清除浮動
　　　　3.BFC在頁面上是一個容器，外面的元素不會影響裏面的元素，裏面的元素也不會影響外面的元素
　　　　4.計算BFC高度時，浮動元素也會參與計算

　　如何建立BFC：
　　　　1.float值不爲none
　　　　2.position值不爲static和relative
　　　　3.display值爲inline-box或者table相關的值
　　　　4.overflow值不爲visible
　　BFC使用場景：
　　　　1.處理垂直方向邊距重疊
　　　　2.不與浮動元素重疊
　　　　3.清除浮動
　　　　　　一、給父級元素設置BFC
　　　　　　二、浮動元素後加空元素設置clear：both
　　　　　　三、父級元素設置僞類after {content: "";display:block;clear:both;}