The difference between the standard box model and weird box model

Box model has four main components:

• Margin: Margins
• Border: Border
• Padding: Padding
• Content: Content

So the box

Width = content (width) + 2 * padding (about) + 2 * border (right and left) + 2 * margin (approximately)

Height = content (height) + 2 * padding (vertical) + 2 * border (vertical) + 2 * margin (vertical)

The biggest difference between the standard box model box model is different and weird in the calculation of the width and height attributes .

1. Standard Box Model

Standard box model is based on W3C specifications established by the standard box model with the exception of a very small part IE5.X and IE6 and other browsers, most browsers we use are employed.

As can be seen, width standard box model = content (width), height = content (height), such as:

.root{
 width:200px;
 height:200px;
 padding:20px;
 border:5px solid red;
 margin:15px;
 background-color: black;
}

The last box model show is like this

2. weird box model

In addition to the standard box model due to the current IE5.X and IE6 and other very small part of the browser, most browsers we use are employed. Weird box model, we will not introduce more.