Understanding of CSS Box models and BFC

CSS Box model

Contains element contents (content), padding (padding), border (border), margin (margin)

General elements Total Width = left and right margin of width+padding of element +margin left and right margin value +border left and right width

High degree of empathy

Margin Merge

Top and bottom margins merge generally occurs in normal document flow, inline box, floating box or absolute positioning between margins are not merged

The generally merged margin takes that larger value

box-sizing Properties (content-box|border-box|inherit)

Content-box: Total width = margin+border+padding+width

Border-box: Total width = width+margin The width of the box contains padding+border+element

Inherit: specifies the property value that inherits box-sizing from the parent element

The problems in practice

• Margin Bounds (the margin-top of the first child element and the margin-bottom of the last child element)

The parent element does not have a border, and the value of the margin-top that sets the first child element is added to the parent element, and the workaround is as follows:

1. To add a border to a parent element
2. Set padding for parent element
3. Parent element Add overflow: Hidden
4. Parent element plus predecessor content generation (recommended)

example:. parent{

width:500px;

height:500px;

Background:red

}

. parent:before{

Content:"";

Display:table

}

. child{

width:200px;

height:200px;

Background:green;

margin-top:50px

}

<div class="Parent" >

<div class="Child" >

</div>

</div>

A box model between browsers

1. UL has padding value in Mozillz , and only margin value in IE
2. The difference between the standard box model and the IE box model, ie is more like box-sizing: Border-box, the solution is to add DOCTYPE to the HTML template

Box Model Draw Triangle

. triangle{

width:0;

height:0;

border:20px solid transparent;

border-top:20px solid red;

}//downward Arrow

BFC Understanding (Block-level formatting context, separate rendering area, specifies how the internal BFC is laid out, and is irrelevant to the outside of this area)

BOX, formatting Context abbreviations

Box:the basic unit of CSS layout

• Box Common boxes: (according to the display of your attributes distinguish box)

Block-level Box:display attribute is block, List-item, tabel element , and participates in BFC;

-Inline-level Box:display properties for inline, Inline-block, inline-table, participating IFC

• BFC Layout Rules

The Inside box will be vertically oriented, one after another to place

Box vertical distance is determined by margin , and the margin of two adjacent boxes belonging to the same BFC overlap

The left side of the Margin box for each subset element is in contact with the left side of the border box that contains his parent element (for the left-to-right format, and vice versa), even if there is a float.

the area of BFC does not overlap with float Box

-BFC on the page is a separate, isolated container, the child elements inside the container will not affect the outside elements, and vice versa

When calculating the BFC height, the floating element height is also involved in the calculation

• Which elements will generate BFC

-- root element

Float not for none

-Position for absolute or fixed

Display for Inline-block, Table-cell, Table-caption, Flex, Inline-flex

-Overflow not visible

Understanding of CSS Box models and BFC