This time, thoroughly understand the CSS box model (illustrated)

First, let's look at the basic concepts css box model:

Is a box package surrounding HTML elements on the nature of the CSS box model, comprising: margin, border, padding, and the actual content. Cartridge model allows us the space between the other elements and the elements are placed around the element border. Are two kinds of cassette type standard box model and IE mold box

Box size

Width = width of the box content filling + + left + right padding left border right border + + + left right margin from

Height = height of the content box on the filling + + + filling the lower margin border + + + bottom margins on the frame

Standard models and the difference between the cartridge box IE

Standard box model: content = content

IE box model: content = width + padding + border

How to set up two models css

Css by the box-sizing property
Standard box model: content-box
IE box model: border-box

How to obtain the width and height of the cartridge JS corresponding to the model

node.style.height/width

In this way only take both the width and height of the inline style dom element, is introduced through the outer link and inline style style tag provided in the style is not acquired width and height of the node

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

1, only the operation inline style;

2, only the region including the content, padding and border portions is not included (only the content);

3, the return value with units, the value of the return data type is string.

node.currentStyle.width / height (ie only support)

This approach is the result of acquiring rendered, but only supports the older versions of IE browser, this feature is nonstandard, try not to use it in a production environment. style, inline styles are paid outreach; return values with units, return value data type is String; unfortunately only support IE.