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相关的

 

posted @ 2018-08-15 18:09  fake丨monk  阅读(167)  评论(0)    收藏  举报