盒模型

CSS 传统盒模型

content => width & height
margin
padding
border
盒子宽度 => content + 左右padding + 左右border

CSS3 新盒模型

box-sizing: content-box; (默认值，传统盒模型)
box-sizing: border-box; (新盒模型)

设置border-box后 盒子大小 => width
无论如何修改padding或者border，内容会自动跟着收缩，盒子大小始终不变

JS 盒模型

获取盒子可视区域宽高 => 内容宽高 + padding
[context].clientWidth, [context].clientHeight

• 内容溢出对其无影响
• 获取的结果没有单位
• 获取的是个整数，会自行四舍五入

获取盒子最终宽高 => 在CLIENT基础上，加上BORDER
[context].offsetWidth, [context].offsetHeight

获取盒子实际宽高
[context].scrollWidth, [context].scrollHeight
在没有内容溢出的情况下，获取的结果与CLIENT一致
在有内容溢出的情况下， 获取的结果约等于真实内容的宽高（上/左padding + 内容高/宽）

• 不同浏览器获取的结果不尽相同
• 设置overflow属性值也会对结果产生一定影响

getComputedStyle

获取当前元素所有经过浏览器计算的样式

• 只要页面渲染出来，那么所有的样式都是经过浏览器计算的
• 即使没有设置或者看不到样式也都计算了
• 可以直接获取
• IE6-8不兼容，需要基于currentStyle获取

// 第一个参数是操作的元素，第二个是元素的伪类 :after、:before
// 获取的结果是cssStyleDeclaration这个类的实例，包含了该元素的所有样式信息
window.getComputedStyle([element], null)
// IE 
[element].currentStyle