Ten minutes to review the CSS box model with the BFC

css box model with the BFC

1. This article summarizes online resources collected
2. The system is designed to review css box model with bfc
3. Saving review time
4. Reading 10 minutes

What is the box model

Each document, each element is represented as a rectangular box, it will have a content area, padding, border, margin

.png)

The box model is mainly divided into two

1. Standard box model
2. IE box model (weird box model)

Difference between the two:

1. Aspect wide area content was high standard box model
2. IE box model the width and height of the content area border + padding +

How do I switch box model?

Used to switch box-sizing

1. IE is switched to the border-box box model
2. content-box default attribute as the standard mode

Overlapping the margins of the box model

Three major types of overlap, overlapping rules: taking the maximum one small, taking a positive and a negative

1. Overlap between adjacent elements
2. Sons nested overlapping
3. The empty block-level elements

1. between adjacent elements

// css
* {
  margin:0;
  padding:0;
  border:0;
}

#d1 {
  width:100px;
  height:100px;
  margin-top:20px;
  margin-bottom:20px;
  background-color:red;
}

#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
  background-color:blue;
}

// html
<div id="d1">
</div>

<div id="d2">
</div>

2. Sons nested overlapping

// css

* {
  margin:0;
  padding:0;
  border:0;
}

#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:20px;
}

#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:10px;
}

// html 
<div id="outer">
  <div id="inner">
  </div>
</div>

3. The empty block-level element

The BFC (overlap margin Solutions)

What is BFC

Block formatting context (Block Formatting Context, BFC) is part of a Web page CSS rendering visualization, is generated during layout block-level box region, but also defines the interaction region of the floating elements and other elements.

Block-level box

Each block-level boxes are involved in the creation block formatting context (block formatting context), and each block element generates at least one block-level box, i.e. the box main block level (principal block-level box)

Sometimes we define a block element, the width and height is provided on a single line, although in addition to the chrome will find a package box elements margin as the same color, the cartridge is block level;

Each element generates a block-level

Several characteristics of block-level box

1. Cartridge will block level in a vertical direction, placed one after each horizontal box fills the entire space of the container
2. Vertical block-level box is determined by the vertical distance margin, belong to a two-phase or more blocks BFC level cassette will be an overlap margin
3. BFC is a separate container isolated on the page, inside the container does not affect child elements to the outside elements.
4. Calculating the height of the BFC, the floating elements are also involved in the calculation

How to create BFC?

1. The root element root element or elements comprising
2. Floating elements (float element is not none)
3. Absolutely positioned elements (position element is absolute or fixed)
4. overflow value is not visible block elements
5. The display is inline-block, table-cell, table-caption

BFC application?

1. Clear float
2. layout
3. Solving block-level overlap margin cartridge

layout

BFC triggers principle is recalculated element size

// html
<div></div>
<p>
    开始清除浮动清除浮动清除浮动....
</p>

// css
    *{
        margin: 0;
        padding: 0;
    }
        div{
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        p{
            background: #f0faa5;
            overflow: hidden;
        }

Clear float

// html
<section class="divwrap">
        <div class="div1">
            float1    
        </div>
        <div class="div2">
            float2
        </div>
    </section>
    
//css
*{
    margin: 0;
    padding: 0;
}
div{
    width: 100px;
    height: 100px;
    background: green;
    float: left;
}
.div2{
    background: red;
}
.divwrap{
    border:3px solid #000;
    overflow: hidden;
}

Resolve overlapping margins

// html
<div class="BFC">
        <p>
            hello world
        </p>
    </div>

    <p>
        hello world
    </p>
    <p>
        hello world
    </p>

// css
    *{
        margin: 0;
        padding: 0;
    }
    .BFC{
        overflow:hidden;
    }
    p{
        color:black;
        background:#D499B9;
        line-height:100px;
        width:200px;
        text-align:center;
        margin:50px;
    }
    

At last

Finally, thanks to everyone who read the small partners to share with all write blog

Reference material

1. MDN-CSS box model
2. MDN- margins merger
3. Margin overlap w3school-
4. MDN- visual formatting model
5. Block formatting context MDN-
6. Detailed taro Jun -CSS of BFC
7. OBKoro1- layout concept of CSS-BFC-depth understanding of