css盒模型

1. 标准盒模型IE和模型及区别

2. css如何设置两种和模型

3. js获取和模型对应的宽和高

4. 根据和模型解释边距重叠

5. 边距重叠解决方案（BFC）

 

1. IE盒模型宽高包含border和padding，标准盒模型不包含

2. 设置两种和模型

　　box-sizing： content-box  标准盒模型（浏览器默认）

　　box-sizing： border-box IE盒模型

3. 获取内联元素宽高 dom.style.width/height

　获取内部样式和外部样式 dom.currentStyle.width/height (IE)

                                            window.getComputedstyle(dom).width/height (chrome/Firefox)

4. BFC 块级格式化上下文

　原理：

　　　　BFC元素垂直方向发生重叠

　　　　BFC区域不会与浮动元素重叠

　　　　BFC在页面中是独立容器

　　　　计算BFC元素浮动元素参与计算

   创建BFC：

　　　　float值不为none

　　　　position值不为static和reletive

　　　　overflow值不为visible

　　　　display值非table相关的

 

来源：https://www.cnblogs.com/fakem0nk/p/9483051.html