[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)
- 說明
- CSS與HTML
- BFC的特性及其常見應用
- CSS深入理解之margin
- CSS深入理解之line-height
- CSS盒模型相關知識
- CSS知識總結
- HTML知識總結
- 三欄布局五種方式
- JavaScript內置對象
- 1.循環
- 2.數組方法對比
- 3.字符串實用常操紀要
- JavaScript核心
- var、let、const定義變量
- this 的指向問題詳解
- 箭頭函數
- ES6部分知識歸納
- ES6的Class
- Promise和Async/await
- 面向對象的概念及JS中的表現
- 創建對象的九種方式
- JS的繼承
- 閉包總結
- 構造函數與作用域
- 原型與原型鏈
- 函數的四種調用模式
- apply、call、bind詳解
- JavaScript應用
- 1.JavaScript實現深拷貝與淺拷貝
- 2.函數防抖與節流
- 3.無阻塞腳本加載技術
- DOM
- 如何寫出高性能DOM?
- 事件探秘
- 事件委托
- 操作DOM常用API詳解
- 重排和重繪
- 運行機制與V8
- 瀏覽器的線程和進程
- Vue.js
- Vue.js知識點總結
- Vue-Router知識點總結
- 父子組件之間通信的十種方式
- 優化首屏加載
- 關于Vuex
- 前端路由原理及實現
- 在Vue.js編寫更好的v-for循環的6種技巧
- 12個Vue.js開發技巧和竅門
- 網絡協議
- HTTP緩存機制
- UDP協議
- TCP協議
- HTTPS協議
- HTTPS的背景知識、協議的需求、設計的難點
- HTTPS與HTTP的區別
- 框架與架構
- MVC、MVP、MVVM
- Gulp與Webpack的區別
- Angular React 和 Vue的比較
- 虛擬DOM和實際的DOM有何不同?
- 架構問題
- 工程化
- npm link命令
- npm scripts 使用指南
- 前端工程簡史
- 常見的構建工具及其對比
- Webpack基本配置與概念
- 設計模式
- 工廠設計模式
- 單例設計模式
- 適配器模式
- 裝飾器模式