谈谈你对 CSS 盒模型的认识
涉及知识点(层层递进):

  1. 基本概念:标准模型+ IE模型(区别)
  2. CSS如何设置这两种模型
  3. JS如何设置获取盒子模型对应的宽和高
  4. 实例题(根据盒模型解释边距重叠)
  5. BFC(边距重叠解决方案)

    CSS盒模型

  6. IE 盒子模型的范围也包括 margin、border、padding、content,

  7. 和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

    CSS如何设置这两种模型

    ``` box-sizing:conent-box; box-sizing:border-box;
  1. <a name="U3ieb"></a>
  2. ### js如何设置获取盒子模型对应宽高

dom.style.width/height dom.currentStyle.width/height (ie支持) window.getComputedStyle(dom).width/height; dom.getBoundingClientRect().width/height;

``` 父子元素边距重叠,那么还有两种情况边距重叠就是,一种是兄弟元素,就是两个 div 挨着,每个都上边距或者下边距,那么重叠的原则就是取最大值。

BFC