CSS盒模型 ​

标准盒模型（content-box默认） ​

width和height指的是content的宽高，增加padding和border不会改变content的尺寸，但是会增加元素框整体的尺寸

IE盒模型（border-box） ​

width和height指的是content+padding+border的宽高，增加padding和border会压缩content的尺寸，元素整体的尺寸不会变。

JS如何设置/获取盒模型对应的宽高 ​

方式1 ​

element.style.width/height 缺点：通过这种方式，只能获取行内样式，不能获取内嵌的样式和外链的样式

方式2 ​

window.getComputedStyle(element).width/height 兼容chrome，火狐，通用方式

方式3(ie独有) ​

element.currentStyle.width/height

方式4 ​

element.getBoundingClientRect().width/height 此 api 的作用是：获取一个元素的绝对位置。绝对位置是视窗 viewport 左上角的绝对位置。此 api 可以拿到四个属性：left、top、width、height。

margin塌陷/margin重叠 ​

标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。

PS：如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有margin重叠的现象的。 举个例子 竖直方向上兄弟元素间 以数值大的为准

margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。

如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。

BFC（边距重叠解决方案） ​

未完待续...