1. The difference between content-box and border-box and related calculation

Box-sizing :content-box; box-width = contentWidth +2*padding+2 *border;

Here is an example

<div class="bc">
    <div class="bc1">
        <div class="bc2"></div>
    </div>
</div>
Copy the code

Here are the CSS styles

.bc{
position: relative;
width:400px;
height:200px;
margin: 10px;
}

.bc1{
width:100%;
height:100%;
box-sizing:border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding:20px;
}

.bc2{
box-sizing: border-box;
width: 50%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 5px solid # 000;
margin: 8px;
padding: 20px;
}
Copy the code

The following is the calculation of the box model

Spaceheight =boxwidth+2*margin spaceheight =2 *margin

bc1: box-sizing:border-box; margin:0 spaceWidth=boxwidth=400*100%=400, spaceHeight=boxheight=200*100%=200,padding=20 ==> contentWidth=400-2*20=360,contentHeight=200-2*20=160 box2: boxSizing=borderbox container(contentWidth=360,contentHeight=160),width=50%,height=50% ==> boxwidth:180,boxheight:80 padding=20; border=5 ==> contentWidth=180-2*20-2*5=130, contentHeight=80-2*20-2*5=30 margin=8 ==> spaceWidth=180+2*8=196,spaceHeight=80+2*8=96Copy the code

Actual renderings:

When the box – sizing: when the content – box,

bc1: box-sizing:border-box; margin:0 spaceWidth=width=400, spaceHeight=height=200,padding=20 ==> contentWidth=400-2*20=360, contentHeight=200-2*20=160 bc2 boxsizing=contentbox container(contentWidth=360, contentHeight=160), width=50%, height=50% ==> contentWidth:180,contentHeight:80 padding=20; border=5 ==> width=180+2*20+2*5=230,height=80+2*20+2*5=130 margin=8 ==> spaceWidth=230+2*8=246,spaceHeight=130+2*8=146Copy the code

Actual renderings:

This shows that the width of the box is different when different box-sizing models are chosen

When content-box is selected, contentWidth remains the same. When padding and border become larger, the box’s visual width becomes larger, affecting the overall layout

When border-box is selected, the contentWidth is compressed when the padding and border become larger. The box viewable width remains the same and does not affect the overall layout

In general development, in order not to affect the overall layout, we usually choose border-box as the box model

2. Summary of unusual rules of Flex layout

1. Flex-direction Determines the extension direction

When the flex-direction attribute is set, its width/height can only be extended on row/column. When it has more than one child element, the W/H of the child element is allocated proportionally (margin is also counted). Example:

<div class="bc">
  
    <div class="bc1">
        <div class="bc2">
            <div class="bc3"></div>
            <div class="bc4"></div>
        </div>
    </div>
</div>
Copy the code

css

.bc{
position: relative;
width:400px;
height:200px;
margin: 10px;
}

.bc1{
width:100%;
height:100%;
box-sizing:border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding:20px;
}

.bc2{
box-sizing: border-box;
width: 50%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 5px solid # 000;
margin: 8px;
padding: 20px;
}

.bc3{
    width:140px;
    height:30px;
}

.bc4{
    width:160px;
    height:90px;
}

Copy the code
bc1: box-sizing:border-box; margin:0 spaceWidth=width=400, spaceHeight=height=200,padding=20 ==> contentWidth=400-2*20=360, contentHeight=200-2*20=160 bc2: boxsizing=border-box container(contentWidth=360, contentHeight=160), width=50%, height=50% ==> width=180,height=80 padding=20; border=5 ==> contentWidth=180-2*20-2*5=130,contentHeight=80-2*20-2*5=30 margin=8 ==> spaceWidth=230+2*8=246,spaceHeight=130+2*8=146Copy the code

To calculate

beacuse bc2(flex-direction:row) ==> bc2-contentWidth=bc3-Width+bc4-Width bc3-Width:bc4-Width=7:8 ==> Bc3-width =130*0.46= 60.62 BC3-width =130*0.54= 60.62 BC3-height,bc4-height be equal to defined vauleCopy the code

When margins are present, the widths of the two child elements are compressed

.bc4{
    margin-left:50px;
}
Copy the code

Same thing for column

You can also assign W/H based on flex values, as shown in the following example

.bc3{
   flex:2
   height:30px;
}

.bc4{
   flex:1
   height:90px;
}
Copy the code

The results are as follows:

2. The child element determines the size of the parent element. Once the child element is fixed, the parent element does not change

When multiple elements allocate W/H, those with child elements can determine their values based on the W/H of their children (with the right to allocate W/H first). And once the child element is fixed, its value does not change.

The instance

html:

<div style="position: relative; width:400px; height:200px; margin: 10px;">
    <div class="bc1">
          <div class="bc2">
            <div class="bc3"></div>
            <div class="bc4"></div>
            <div class="bc5">
                <div class="bc6"></div>
            </div>
        </div>
    </div>
</div>
Copy the code

css:

.bc{
position: relative;
width:400px;
height:200px;
margin: 10px;
}

.bc1{
width:100%;
height:100%;
box-sizing:border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding:20px;
}

.bc2{
box-sizing: border-box;
width: 50%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 5px solid # 000;
margin: 8px;
padding: 20px;
}

.bc3{
    width:140px;
    height:30px;
}

.bc4{
    width:160px;
    height:90px;
}

.bc5{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}
.bc6{
    width:100px;
    height:100px;
}
Copy the code

Calculation:

Bc6 :width=100,height=100 ==> bc5 width,height not defined ==> bc5 width=100,height=100; bc5: Margin-left =10 ==> < span style = "max-width: 100%; clear: both; min-height: 1em height has defined vaule ==> height not changeCopy the code

There are800,000 monographs

3. When the parent element W/h is undefined, the maximum W/h of the child element determines the parent element W/h

Instance as follows

html:

<div style="position: relative; width:400px; height:200px; margin: 10px;">
    <div class="bc1">
          <div class="bc2">
            <div class="bc3"></div>
            <div class="bc4"></div>
        </div>
    </div>
</div>
Copy the code

css

.bc{
position: relative;
width:400px;
height:200px;
margin: 10px;
}

.bc1{
width:100%;
height:100%;
box-sizing:border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding:20px;
}

.bc2{
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 5px solid # 000;
margin: 8px;
padding: 20px;
}

.bc3{
    width:50px;
    height:30px;
}

.bc4{
    width:100px;
    height:90px;
}
Copy the code

Flex-direction =row ==>bc2-width=100+50=150,height is undefined.

When you change the height below

.bc3{
    width:50px;
    height:100px;
}
.bc4{
    width:100px;
    height:50px;
}
Copy the code

Below is the new map

The height of the parent element is changed by the children, and the maximum (100px) is still the width of the sum of the children

— — — — — — — — — — — — — — — — — — — — — I’m line — — — — — — — — — — — — — — — — — — — — — — — — –

In fact, there are a lot of rules in the layout, I hope we can share with you after careful discovery, let you less pit!! The above