JavaScript box Model Size Deep Understanding _ Basics

Concept

From Wikipedia: According to CSS1, which was published in 1996 by the World Wide Web Consortium and revised in 1999, when any block-level element's width or height is explicitly specified, it should only determine the width or height of the visible element itself (the content area), and padding, Border and margin are subsequently applied. Internet Explorer includes content, internal margins (padding), and borders (border) all within a specified width or height in "weird mode," which causes it to exhibit a box that is narrower or shorter than the result of conforming to standard behavior. The following figure:

Application

Understanding the box model, whether it's an accurate application of an element outside, a border, an inner margin, a high-wide CSS style, or the use of JavaScript to compute the width and height of a box, is a great help. For example, the outerwidth,innerwidth,width provided in jquery, with the above figure, can be very clear about the value of the exact information at any time, in the calculation of the position and size of an element is very useful.

The application in the pop-up layer dynamically adjusts the pop-up layer size and is useful for calculating the maximum range margin during drag-and-drop.

a picture to understand: