理解とCSSボックスモデル計算の概要

まず、分類ボックスモデル

 

 

 

 

モデルと標準モデルIEの間に第二に、違い

 

図から分かるように、違いは、異なる幅と高さの計算です。

標準モデルは、コンテンツの幅/高さを算出します

IEのモデル計算では、コンテンツ+パディング+枠線幅/高さであります

 

 

第三に、標準モデルとモデルは、IEが設けられています。

 

1、標準モデル（デフォルト）

ボックスのサイズ変更：コンテンツボックス。

 

2、IEモデル

ボックスサイズ：ボーダーボックス;

 

 

第四に、ボックスモデル計算の幅と高さ

 

図1は、6つの方法の概要の幅と高さを計算します

 

幅DOMの幅を取得します。
コンテンツだけ幅が算出される（単位はピクセルを結果）	唯一のインラインスタイル dom.style.width   内部と外部スタイルシートとインラインスタイルに適した、だけでIEをサポートしています dom.currentStyle.width   インライン内部と外部スタイルシートとスタイル、そして優れた互換性のために適しました  window.getComputedStyleが（DOM）.width
（無単位はピクセルを生じない）最終的な幅を計算	標準モデル：コンテンツ+パディング IEモデル：コンテンツ - 境界線 dom.clientWidth   標準モデル：コンテンツ+パディング+ボーダー  IEモデル：コンテンツ dom.offsetWidth   標準モデル：コンテンツ+パディング+ボーダー IEモデル：コンテンツ dom.getBoundingClientRect（）。幅

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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