CSS盒子模型的理解及其計算方式匯總

一、盒模型的分類

 

 

 

 

二、標准模型與 IE 模型的區別

 

從上圖可看出，兩者的區別在於寬度和高度的計算方式不同：

標准模型計算的是 content 的寬/高

IE 模型計算的是 content + padding + border 的寬/高

 

 

三、標准模型與 IE 模型的設置

 

1、標准模型（默認）

box-sizing: content-box;

 

2、IE 模型

box-sizing: border-box;

 

 

四、盒模型寬高的計算

 

1、計算寬高的 6 種方式匯總

 

獲取 dom 的寬度 width
只計算內容寬度（結果帶單位px）	僅限於行內樣式 dom.style.width   適用於行內樣式與內外樣式表，但僅支持 IE dom.currentStyle.width   適用於行內樣式與內外樣式表，且兼容性好  window.getComputedStyle(dom).width
計算最終寬度（結果不帶單位px）	標准模型：內容 + 內邊距 IE 模型：內容 - 邊框 dom.clientWidth   標准模型：內容 + 內邊距 + 邊框  IE 模型：內容 dom.offsetWidth   標准模型：內容 + 內邊距 + 邊框 IE 模型：內容 dom.getBoundingClientRect().width

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2、示例：

（這里為標准模型下的計算結果）

div1.style.width
// ""
// 只限於行內樣式（這里沒有設置所以為空值）

div1.currentStyle.width
// 100px
// 只有 IE 支持

window.getComputedStyle(div1).width
// 100px

div1.clientWidth
// 標准模型下：120
// IE 模型下：98

div1.offsetWidth
// 標准模型下：122
// IE 模型下：100

div1.getBoundingClientRect().width
// 標准模型下：122
// IE 模型下：100