ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptボックスモデルのディメンション徹底理解_基礎知識
JavaScriptボックスモデルのディメンション徹底理解_基礎知識
- WBOYオリジナル
- 2016-05-16 17:44:50971ブラウズ
コンセプト
Wikipedia から引用: 1996 年に World Wide Web Consortium (W3C) によって発行され、1999 年に改訂された CSS1 によると、ブロックレベル要素の幅または高さが明示的に指定されている場合、幅または高さのみを決定する必要があります。表示要素自体 (コンテンツ領域) の高さ、パディング、境界線、マージンが適用されます。 「奇妙なモード」の Internet Explorer は、コンテンツ、パディング、境界線を指定された幅または高さ内で折り返すため、標準の動作よりも狭いまたは広い結果が表示されます。以下に示すように:
ボックス モデルを理解することは、要素の外側のマージン、境界線、パディングの設定、高さと幅の CSS スタイルの正確な適用、または JavaScript を使用したボックスの幅と高さの計算のいずれにおいても非常に役立ちます。たとえば、jQuery で提供される externalWidth、innerWidth、width を使用すると、この値の正確な情報をいつでも明確に把握でき、要素の位置とサイズを計算するときに非常に役立ちます。
これは、ポップアップ レイヤーのアプリケーション、ポップアップ レイヤーのサイズの動的調整、ドラッグ中の余白の最大範囲の計算に役立ちます。
理解するための 1 つの図:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。