题目：谈谈你对CSS盒模型的认识
考点：
- 基本概念：标准模型+IE模型
- 标准模型和IE模型的区别
- CSS 如何设置这两种模式
- JS 如何设置获取盒模型对应的宽和高
- 实例题（根据盒模型解释边距重叠）
- BFC（边距重叠解决方案）
1. 基本概念与区别
标准模型：不包含 border 和 padding
IE模型：包含 border 和 padding
2. CSS 如何设置这两种模式
这里用到了CSS3的box-sizing
box-sizing: content-box; // 标准模型
box-sizing: border-box; // IE模型
3. JS 如何设置获取盒模型对应的宽和高
通过JS获取盒模型对应的宽和高，有以下几种方法：
(为了方便书写，以下用dom来表示获取的HTML的节点。)
-
dom.style.width/height
这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。 -
dom.currentStyle.width/height
这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。 -
window.getComputedStyle(dom).width/height
这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。 -
dom.getBoundingClientRect().width/height
这种方式是根据元素在视窗中的绝对位置来获取宽高的 -
dom.offsetWidth/offsetHeight
这个就没什么好说的了，最常用的，也是兼容最好的。
4. 实例题（根据盒模型解释边距重叠）
边距重叠:子元素设置了 margin-top：20px；而父级元素没有设置 margin-top。但是父元素跟着一块有了上边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<section class="demo">
<style media="screen">
.demo .margin .parent .child{
margin-top: 100px;
background-color: red;
height: 100px;
}
</style>
<article class="margin">
<div class="parent">
<div class="child"></div>
</div>
</article>
</section>
</body>
</html>
5. BFC（边距重叠解决方案）
BFC：块级格式化上下文，其全英文拼写为 Block Formatting Contex。
BFC的原理：
- box 垂直方向的距离由 margin 决定，属于同一个bfc的两个相邻 box 的 margin 会发生重叠；
- BFC 的区域不会与浮动区域的box重叠；
- BFC 是一个页面上的独立的容器，外面的元素不会影响 BFC 里的元素，反过来，里面的也不会影响外面的；
- 计算 BFC 高度的时候，浮动元素也会参与计算。
如何创建BFC：
- float 属性不为 none；
- position 不为 static 或 relative；
- display 为 inline-block,table-cell,table-caption,flex,inine-flex；
- overflow 不为 visible；
应用场景：
- 自适应两栏布局；
- 清除内部浮动 ；
- 防止垂直margin重叠。
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
