共计 2241 个字符，预计需要花费 6 分钟才能阅读完成。
CSS 中的盒模型
传统盒模型 在传统盒子模型中我们说的宽度和高度是指该块元素内容的宽度和高度。而一个块元素的宽度是
width === width+padding(left/right)+border(left/right);
相应的一个块元素的高度是
height === height+padding(top/bottom)+border(top/bottom);
CSS3 中的盒模型 在 css3 中新增加了盒子模型 .box{
border-sizing: border-box;
} 此时块元素的的 width 和 height 仅仅是这个块元素的宽度和高度。它包含了这个块元素的 padding 和 border。在这个基础上我们在修改 padding 或者 border 块元素的宽度讲不会发生变化。改变的是内容的宽高。
JS 中的盒模型
JS 中也提供了一些属性和方法用来描述当前元素的样式, 主要有以下几种：备注：通过 JS 盒子模型属性获取的结果是不带单位的。而且只能是整数（它会自动四舍五入，进行计算）
clientWidth/clientHeight clientWidth/clientHeight：当前盒子可视区域的宽度和高度 可视区域是指：内容的宽高 +padding
clientWidth = width + padding(left + right);
clientHeight = height + padding(top + bottom);
可视区域和内容是否溢出以及我们是否设置了 overflow：hidden 没有关系 在我们的项目中，我经常这样使用这两个属性
// 获取当前页面一屏幕的宽度
W = document.documentElement.clientWidth||document.body.clientWidth;
// 获取当前页面一屏幕的高度
H = document.documentElement.clientHeight||document.body.clientHeight;
利用这个就可以实现让一个盒子水平和垂直居中。即实现相对定位，计算出来 left 和 top 就可以实现
//width 和 height 是盒子的宽高
left = (W-width)/2;
top = (H-height)/2;
clientLeft/clientTopclientLeft: 盒子左边框的宽度。clientTop: 盒子上边框的高度。它俩获取的结果其实就是 border-width。JS 中只有 clientLeft 和 clientTop，没有 clientRight 和 clientBottom 这两个属性。
offsetWidth/offsetHeight
offsetWidth/offsetHeight 就是在 clientWidth 和 clientHeight 的基础上加上盒子的边框。即：
offsetWidth === clientWidth + border(left/right);
offsetHeight === clientHeight + border(top/bottom)
和内容是否溢出没有关系。在我们的项目中，如果想获取一个盒子的宽度和高度，我们一般用 offsetWidth（而不是 clientWidth）和 offsetHeight，因为 border 也算是当前盒子的一部分。
scrollWwidth/scrollHeight
1) 没有内容溢出情况下：
获取的结果和 clientWidth/clientHeight 是一样的
2) 有内容溢出的情况下:
真实内容的宽度和高度（包含溢出的内容），在加上左边的 padding 和上边的 padding 值。
// 有横向滚动条时，获取当前页面的真实宽度
document.documentElement.scrollWidth||document.body.scrollWidth;
// 有纵向滚动条时，获取当前页面的真实高度
document.documentElement.scrollHeight||document.body.scrollHeight;
window.getComputedStyle/currentStyle
在 JS 中获取元素具体的样式值：例如获取某个元素的 paddingLeft 值。方法一：currentElement.style.XXX 例如：
box.style.paddingLeft
注意这个方法是获取当前元素的行内样式。只能获取当前元素的行内样式，内嵌或者外联样式是不能获取的。
方法二：通过 window.getComputedStyle/currentStyle 可以获取所有经过浏览器计算过的样式。
或者当前元素的 paddingLeft 值，使用例子：
window.getComputedStyle(box, null).paddingLeft
// 或者下面这个方法，box 是当前元素，第二个参数是当前元素的伪类，一般为
window.getComputedStyle(box, null)[‘paddingLeft’]
window.getComputedStyle 在 IE6~8 中不兼容。不兼容的原因是因为在 IE6~8 下，window 对象没有 getComputedStyle 属性发放导致的。所以在 IE6~8 中我们使用 currentStyle 属性。备注 currentStyle 只有 IE 中才有，其他浏览器中都没有这个属性。使用方法例子：
box.currentStyle[‘paddingLeft’];
// 或者
box.currentStyle.paddingLeft
