[toc] ## 什么是盒模型 一个CSS盒模型由content、border、padding、margin组成，盒模型又分为标准模型和IE模型。 标准模型和IE模型区别就是就是计算盒子的宽度和高度的不同。 - 标准模型：标准模型的宽度和高度指的是content  - IE模型：IE模型的宽度高度包括padding+border  ## CSS如何设置这两种模型？ CSS3提供了`box-sizing`属性，他有如下三个取值： 1. content-box，默认值，border和padding不计算入width之内 2. padding-box，padding计算入width内 3. border-box，border和padding计算入width之内 浏览器模型默认是标准模型，也就是`content-box` ## JS如何设置获取盒模型对应的宽和高？ - **dom.style.width/height**，这种方式只能获取元素的内联样式 - **dom.currentStyle.width/height**，获取即时运行的（渲染后的）元素样式，不管是用哪种方式定义的样式，但是这个属性只有IE支持 - **window.getComputedStyle(dom).width/height**，作用同`currentStyle`，但是兼容Firefox和Chrome，通用性更好 - **dom.getBoundingClientReact().width/height**，也能拿到元素渲染后的真实的宽高，这个API经常用来计算一个元素的绝对位置，这个位置是相对于视窗（Viewport）左上角左顶点，返回left、top、width、height。 ***** 慕课网实战课程：[《前端跳槽面试必备技巧》](http://coding.imooc.com/learn/list/129.html)