Judgment of width and height of box in different modes

I once encountered such a problem. When setting a div, when setting padding on the div, I found that the width and height of the entire div had changed. This raised a question, how to determine the overall width and height of a box? What about judgment?

After inquiry, we learned that there are two modes for determining the width and height of the box, namely standard mode and weird mode.

In order to better understand, let’s first set a div and style it:

<span style="color: #008080;">1</span> <span style="color: #800000;">    #content1</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">        border</span>:<span style="color: #0000ff;"> 2px solid black</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">        margin</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">        padding</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">7</span>     } 

Under normal circumstances, the width and height of a box are equal to the width and height of the content + the width and height of the border + the width and height of the inner margin + the width and height of the outer margin

This is the box width and height determination in standard mode

But at some point (DOCTYPE is missing under ie6, 7, 8) the width and height of the box is equal to the set width and height + the width and height of the outer margin. The set width and height here is equal to the width and height of the content + inner margin The width and height + the width and height of the border

This is the box width and height determination in weird mode

We can decide which mode to use by using the box-sizing attribute,

content-box: Will use standard modeparsingcalculation,

border-box: Will use weird modeanalysiscalculation;

Through weird mode, we can set padding on the box without changing the overall width and height.