CSS盒模型

• CSS盒模型
  
  

上图显示：

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

• CSS盒模型和IE盒模型的区别：

在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
CSS如何设置这两种模型

代码如下：

/* 设置当前盒子为 标准盒模型（默认） */
box-sizing: content-box;

/* 设置当前盒子为 IE盒模型 */
box-sizing: border-box;
备注：盒子默认为标准盒模型。

JS如何设置、获取盒模型对应的宽和高

方式一：通过DOM节点的 style 样式获取

element.style.width/height;

缺点：通过这种方式，只能获取行内样式，不能获取内嵌的样式和外链的样式。

这种方式有局限性，但应该了解。

方式二（通用型）

window.getComputedStyle(element).width/height;

方式二能兼容 Chrome、火狐。是通用型方式。

方式三（IE独有的）

element.currentStyle.width/height;

和方式二相同，但这种方式只有IE独有。获取到的即时运行完之后的宽高（三种css样式都可以获取）。

方式四

element.getBoundingClientRect().width/height;

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

• 总结：

上面的四种方式，要求能说出来区别，以及哪个的通用型更强。

margin塌陷/margin重叠

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