Standard CSS box model and Model Comparison IE and set the size of the acquired cassette

CSS box model include:
Content Content + padding padding + border border + margin margins

1. Standard Model and Model Comparison IE

• Standard / W3C box model range include margin, , border, padding, contentand contentit does not include other parts.

• IE box model ranges is also encompassed margin, , border, padding, contentare different from the standard box, the box IE contentincluded paddingand borderportions.

  How to set the standard model and 2.CSS IE model

  By the following syntax

box-sizing:border-box || content-box || inherit

• When used content-boxwhen: the page to resolve the standard pattern is calculated, content-boxis the default mode;
• When used border-box, the page mode will use the IE analytical calculation;

• When inheritthe time: page elements inherit from the parent box-sizing's value.

  3.JS setting acquisition box model width and height corresponding to

  For the three ways to add the CSS: CSS inline styles, increased <style>node outer style sheets. There are the following ways:
• dom.style.width/height: Remove only the width and height of the inline style, specific examples .
• dom.currentStyle.width/height: Gets the style of real-time computing, real-time rendering is the result of running, but only support IE.
• window.getComputedStyle(dom).width/height: Gets the style is also calculated in real time, support other browsers such as Chrome and Firefox, better compatibility.

• dom.getBoundingClientRect( ).width/height: Calculate the absolute position of the box model on the page, it is rarely used.
  For details, see here .
  "Margins overlap and BFC" see here .