今回は、徹底的にCSSボックスモデルを理解する（図示）

まず、基本的な概念CSSボックスモデルで見てみましょう：

マージン、ボーダー、パディング、および実際のコンテンツを：含むCSSボックスモデルの性質上のHTML要素を囲む箱パッケージです。カートリッジのモデルは、他の要素と要素の間の空間が要素の境界線の周囲に配置されている私たちをことができます。カセット型の2種類があり、標準的なボックスモデルとIEの型枠は、

箱サイズ

幅=幅ボックス内容充填+ +左+右パディング左ボーダー右ボーダー+ + +から右マージンを残しました

フレーム上の高さ=充填のコンテンツボックスの高さ+ + +充填下部マージン境界は+ + +ボトムマージン

標準モデルとカートリッジボックスの違いIE

標準的なボックスモデル：内容=コンテンツ

IEのボックスモデル：コンテンツ=幅+パディング+ボーダー

二つのモデルのCSSを設定する方法

ボックスのサイズ変更プロパティによってCSS
標準的なボックスモデル：コンテンツボックス
IEのボックスモデル：ボーダーボックス

モデルに対応したカートリッジJSの幅と高さを取得する方法

node.style.height /幅

このようにのみインラインスタイルDOM要素の幅と高さの両方を取り、外側のリンクを介して導入されたスタイルに設けられたインラインスタイルスタイルタグは、ノードの幅と高さを取得していません

   <div style="width:100px;height:50px" id="agoni">agoni</div>
   
   document.getElementById("agoni").style.width ="200px";

1、動作のみのインラインスタイル。

図2に示すように、コンテンツ、パディング及び境界部分を含む領域のみ（のみコンテンツ）に含まれていません。

図3に示すように、ユニットと戻り値は、戻り値のデータ型の値は文字列です。

node.currentStyle.width /高さ（すなわちのみサポート）

このアプローチは、レンダリングされた取得の結果であるが、唯一のIEブラウザの旧バージョンをサポートし、この機能は非標準である、本番環境では使用しないようにしてください。スタイル、インラインスタイルはアウトリーチ支払われ、戻り値を単位と、戻り値のデータ型はStringです。残念ながら、IEのみをサポートしています。