Some knowledge points in CSS

This is my participation 8 The fourth of the yuegengwen challenge 23 God , Check out the activity details ：8 Yuegengwen challenge

css The box model

Is the rectangular area used to hold the elements on the page .CSS The box model in includes IE Box model and standard W3C Box model .

box-sizing( Yes 3 A value )：border-box,padding-box,content-box.

Standard box model ：

IE Box model ：

difference ： As we can see from the picture , The main difference between the two box models is width The scope of , In the standard box model ,width finger content The width of the part , stay IE In the box model ,width Express content+padding+border The width of these three parts , Therefore, this makes a difference in calculating the width of the whole box ：

The box width of the standard box model ：width

IE The box width of the box model ： about border+ about padding+width

stay CSS3 Introduced in box-sizing attribute ,box-sizing:content-box; Represents the standard box model ,box-sizing:border-box It means IE Box model box-sizing The three values of property ：

• content-box： The default value is ,border and padding It doesn't count width Within the scope of , Analytical calculation with standard model , yes W3c The standard model of (default)
• border-box：border and padding Put it under width Within the scope of , The strange mode is used to analyze and calculate , yes IE The weird box model of
• padding-box： take padding Count in width Range

Last , We also mentioned earlier ,box-sizing:padding-box, The width of this property value includes left and right padding+width It's also a good understanding of sexual memory , What does it contain ,width From what .

BFC（ Block level formatting context , For clear floating , prevent margin Overlap, etc. ）

Block level formatting context , Is a separate rendering area , And there are certain layout rules .

BFC Area will not be associated with float box overlap

BFC It's a separate container on the page , Child elements do not affect the outside

Calculation BFC Altitude time , Floating elements also participate in the calculation

Those elements will generate BFC：

Root element

float Not for none The elements of

position by fixed and absolute The elements of

display by inline-block、table-cell、table-caption,flex,inline-flex The elements of

overflow Not for visible The elements of Here you can refer to my article BFC

The way to center vertically

• margin:auto Law

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 code 

The positioning is up, down, left and right 0,margin：0 It can be separated from the document flow .

• margin Negative value method

.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 code 

margin-top: -190px; height Half of

margin-left: -240px; width Half of

Add ： In fact, you can also marin-top and margin-left Replace negative values with , transform：translateX(-50%) and transform：translateY(-50%)

• table-cell（ Not detached from the document stream ）

Set the display:table-cell, also vertical-align:middle, In this way, the child elements can be vertically centered .

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

• utilize flex

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

The problem of double distance overlap （ collapsing margins ）

Multiple adjacent （ Brother or father son relationship ） The vertical direction of the block element of a normal stream marigin It will overlap

The result of folding is ：

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

When two adjacent outer margins are negative , The result of folding is the greater of the absolute values of the two .

When two outer edges are one positive and one negative , The result of folding is the sum of the two .