Describe the two box models separately

❝

Many of today’s troubles stem from yesterday’s laziness.

❞

Let’s look at the explanation of MDN first

When a document is laid out, the browser’s rendering engine represents all elements as rectangular boxes, according to one of the standards, the CSS Basic Box Model. CSS determines the size, location, and properties of these boxes (such as color, background, border size…). .

The official explanation is just a little hard to follow. Let’s go to the browser console.

Each element is a actually a box, it consists of margin, border, padding and the content of the blue is in the middle of the content

Usually we will set various styles for the content inside, and the whole box will be rendered in the browser according to the styles.

Standard box model

box-sizing="content-box";
Copy the code

When we set the width and height of an element.

The standard box model just sets the width and height for the Content (in blue), so let’s put the previous figure here again. The true width and height of the element must be added to its padding, border, and margin. We’re gonna have to do some math on the layout.

IE Box Model (Weird box model)

box-sizing="border-box";
Copy the code

When we set the width and height of an element.

The weird box model, on the other hand, treats the whole box as a whole. Give the whole box a width and height. If you add extra margins and borders to the box. So the blue content in the middle is going to get squeezed and get smaller.

conclusion

Standard box model: Set content size only. IE box model: Size the entire element as a whole

If it helps you, please click 👍! We will continue to share more articles

This article is formatted using MDNICE