Box model and BFC

Box model and BFC

1. What is the box model?

In our HTML page, each element can be regarded as a box, and this box consists of four parts: content, padding, border, and margin.

2. What are the two box models?

In standard mode: the total width of a block (the width of the page) = width + margin (left and right) + padding (left and right) + border (left and right)

In weird mode: the total width of a block = width + margin (left and right) (that is, the width already contains the padding and border values) (IE browser)

3. Conversion of standard and weird models

box-sizing: content-box; will adopt the standard box model standard

box-sizing:border-box; will adopt the box model standard of weird mode

box-sizing: inherit; Specifies that the value of the box-sizing attribute should be inherited from the parent element.

4. JS box model

How to get and set the content width and height of the box

IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height

var obj = document.getElementById("box");

var style = null;
if (window.getComputedStyle) {
    
    
    style = window.getComputedStyle(obj, null);    // 非IE
} else {
    
     
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "\nheight=" + style.height);

5. Solution to the double-sided distance coincidence problem generated by the box model

See another blog BFC for details