[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)