CSS盒模型

CSS盒模型是前端的基石，这个问题由浅入深，由易到难，可以依次问出下面几个问题

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

1、基本概念

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

2、标准模型与IE模型的区别

标准模型与 IE 模型的区别在于宽高的计算方式不同。标准模型计算元素的宽高只算 content 的宽高，IE模型是 content + padding + border 的总尺寸。假如 content 宽高是 100px，padding 为 10px，border为 10px，margin为10px，那么在标准模型下，这个元素的宽为 100px，高为 100px。IE模型下，宽为 100px + 210px(左右padding) + 210px(左右border) = 140px;高为 100px + 210px(上下padding) + 210px(上下border) = 140px;

3、如何设置这两种模型

//设置标准模型
box-sizing: content-box;
//设置IE模型
box-sizing: border-box;

4、JS如何设置盒模型的宽和高

假设已经获取的节点为 dom
//只能获取内联样式设置的宽高
dom.style.width/height

//获取渲染后即时运行的宽高，值是准确的。但只支持 IE
dom.currentStyle.width/height

//获取渲染后即时运行的宽高，值是准确的。兼容性更好
window.getComputedStyle(dom).width/height;

//获取渲染后即时运行的宽高，值是准确的。兼容性也很好，一般用来获取元素的绝对位置，getBoundingClientRect()会得到4个值：left, top, width, height
dom.getBoundingClientRect().width/height;

5、BFC

什么是 BFC？Block Formatting Context（块级格式化上下文）。
在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。

如何创建BFC

float的值不是none。
position的值不是static或者relative。
overflow的值不是visible。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex。

BFC的作用
利用BFC避免margin重叠
自适应两栏布局
清除浮动