css--Box Model

---restore content starts---

Box Model:

1. Basic content:

2. Basic concept: Standard Model +ie model

3, the difference between the standard model and IE model:

4, CSS How to set these two models:

5, JS How to set the acquisition box model corresponding width and height

6, according to the box model to explain the margin overlap

7. BFC (margin overlap solution)

Basic content:

Content+padding+border+margin

Basic concepts:

Standard Model: The width of CSS settings refers to the width of content, such as width:100px, refers to the contents of 100px, the actual width = Content+padding+margin+border

IE Model: The width of the SS setting refers to the width of the content+border+padding, such as width:100px, refers to the content+padding+border=100px

The difference between a standard model and an IE model:

The width and height of the two calculations are different.

Standard Model width = content

IE Model width = Content+padding+border

How CSS sets up both of these models

Box-sizing:content-box | Border-box default is Content-box (Standard Model)

JS how to set the Capture box model corresponding width and height

(1) dom.style.width--can only get the width of the inline style

(2) Dom.currentStyle.width--Get the width of the DOM after rendering (only IE support)

(3) window.getComputedStyle (DOM). Width

(4) Dom.getboundingclientrect (). Width--used when calculating the absolute position of an element

Explanation of margin overlap based on box model

For example DIV1 and div2,div1 margin-bottom = 30px, div2 margin-top = 5px,div1 and Div2 distance is 30px, this is the margin overlap , will take the maximum between the two as the margin

BFC (margin overlap solution)

(1), the basic concept of BFC: block-level formatting context

(2), the principle of BFC

*: Elements outside and elements inside are not interfering

*:float elements do not overlap with BFC elements

*:BFC element margin overlap in the vertical direction

*:BFC if the child element inside is floating, then the height of the parent element is computed, and the altitude of the floating element is computed (clearing the floating principle)

(3), how to create BFC

(1) root element

(2) The value of float is not none

(3) The value of overflow is not visible

(4) The value of display is Inline-block,table-cell,table-caption

(5) The value of position is absolute or fixed

(4), BFC use scene

BFC margin overlap solves the problem of margin overlap

Set the style of the Div2 Overflow:hidden so that div2 becomes a BFC, because BFC is a separate area, the outer elements and the elements inside do not interfere with each other, so there is no margin overlap

BFC apply to two-column layout

<section id= "Main" >
    <style>
        #main. left{
            Float:left;
            width:100px;
            height:100px;
            Background-color:pink;
        }
        . right{
            height:200px;
            Background-color:blue;
            /*overflow:hidden;*/
        }
    </style>
    <div class= "left" >left</div>
    <div class= "right" >right</div>
</section>

When you set the. Right to Overflow:hidden, and then to the BFC, and the BFC does not overlap with float, the left and

---restore content ends---

css--Box Model