This is the 23rd day of my participation in the August More Text Challenge.More challenges in August

CSS box model

This is the rectangular area that holds the elements on the page. The box model in CSS includes IE box model and standard W3C box model.

Box-sizing (3 values) : border-box,padding-box,content-box

Standard box model:

IE box model:

The difference between: In the standard box model, width refers to the width of the content part; in the IE box model, width refers to the width of the content+padding+border parts. Therefore, there is a difference in calculating the width of the entire box:

Standard box model box width: width

IE box model box width: left/right border+ left/right padding+width

Box-sizing :content-box; box-sizing:content-box; Box-sizing :border-box; box-sizing:border-box; box-sizing:border-box;

  • Content-box: default values, border and padding are not included in width, and are parsed in W3c standard mode (default).
  • Border-box: Border and padding are placed in the width range, and are analyzed and calculated in weird mode. It is the weird box model of IE
  • Padding-box: Calculates the padding into the width range

Box-sizing :padding-box; box-sizing:padding-box; box-sizing:padding-box;

BFC (block-level formatting context for clear float, preventing margin overlap, etc.)

The block-level formatting context is a separate rendering area with certain layout rules.

The BFC area does not overlap with the float box

The BFC is a separate container on the page, and the child elements do not affect the outside

When calculating the height of the BFC, floating elements are also involved in the calculation

Which elements generate the BFC:

The root element

Float is an element that is not None

Position is an element of fixed and absolute

Display inline-block, table-cell, table-caption, flex, inline-flex element

Overflow is not a visible element. Here refer to my article BFC

Vertical center method

  • Margin: auto method
css:
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:
<div>
<img src="mm.jpg">
</div>
Copy the code

Margin: 0 can be used to center out of the document flow.

  • Margin method of negative
.container{
width: 500px;
height: 400px;
border: 2px solid # 379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: # 746;
position: absolute;
top: 50%;
left: 50%;
Copy the code

margin-top: -190px; The height of the half

margin-left: -240px; The width of the half

Transform: translateX(-50%) and transform: translateY(-50%)

  • Table-cell (not out of document flow)

Set the parent element’s display:table-cell and vertical-align:middle to center the element vertically.

div{
    width: 300px;
    height: 300px;
    border: 3px solid # 555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}
Copy the code
  • Using the flex

Set the parent element to display:flex, and set align-items:center; justify-content:center;

Double margin overlap problem (margin folding)

Block elements of multiple adjacent (sibling or parent-child) normal streams overlap vertically

The result of folding is:

When two adjacent margins are both positive, the result of folding is the larger value between them.

When two adjacent margins are both negative, the result of folding is the greater value of their absolute values.

When two margins are positive and negative, the result of folding is the sum of the two.