谈谈你对 CSS 盒模型的认识
涉及知识点(层层递进):
- 基本概念:标准模型+ IE模型(区别)
- CSS如何设置这两种模型
- JS如何设置获取盒子模型对应的宽和高
- 实例题(根据盒模型解释边距重叠)
-
CSS盒模型
IE 盒子模型的范围也包括 margin、border、padding、content,
- 和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。
CSS如何设置这两种模型
``` box-sizing:conent-box; box-sizing:border-box;
<a name="U3ieb"></a>
### js如何设置获取盒子模型对应宽高
dom.style.width/height dom.currentStyle.width/height (ie支持) window.getComputedStyle(dom).width/height; dom.getBoundingClientRect().width/height;
``` 父子元素边距重叠,那么还有两种情况边距重叠就是,一种是兄弟元素,就是两个 div 挨着,每个都上边距或者下边距,那么重叠的原则就是取最大值。