A brief explanation of box-sizing in css (standard box model and weird box model)_html/css_WEB-ITnose

When I was writing a program to do layout today, I encountered a problem about the box model in CSS. I asked Baidu to explain this attribute. I have a big brain, but the text is too confusing to understand. What should I do? So I wrote a program test myself. Well, it was good. Once I saw the effect, I suddenly understood. Here is a brief explanation, which may be superficial. But I hope it can help some front-end friends.

First let’s talk about the value of box-sizing. There are three optional values ​​​​for box-sizing, inheirt, content-box (standard box model) and border-box (ie6 and other non-standard browsers) Weird box model);

First let’s talk about the first value content-box, which is the default value of box-sizing. It means: the width of the space actually occupied by the element = the width (width) we set, the border and the inner spacing. Suppose we set the width of a div to 100px. If we set the border and spacing for this div, the border and spacing will expand outward. causing the actual width of the actual div to be greater than 100px. The above code and pictures are clear at a glance.

First define a div with a width and height of 100px, set box-sizing to content-box, and set the background to red. To highlight it we put it on a blue background;

<div id="bx1" style="width:300px;height:300px;background:blue;">        <div id="bx2" style="width:100px;height:100px;background:red;margin:0px auto;box-sizing:content-box;"></div></div>

It is displayed as follows:

For ease of comparison we add The only difference between a new div and the previous div is the addition of a 10px yellow border;

<div id="bx1" style="width:300px;height:300px;background:blue;">        <div id="bx2" style="width:100px;height:100px;background:red;margin:0px auto;box-sizing:content-box;"></div>        <div id="bx3" style="width:100px;height:100px;background:red;margin:10px auto; box-sizing:content-box;border:10px solid yellow"></div></div>

The result is as shown: the border is expanded outside the div.

We are adding a 10-pixel inner margin to the newly added div. As a result, the inner margin also expands outward. Why is it said that the inner margin expands outward? You can pay attention to the position of "hello".

#bx3{padding:10px;}

　

Okay, now that we’ve finished talking about one attribute, let’s start with another attribute, border-box. Modify the box-sizing of the original div to border-box.

The border-box expands inward. If you set box-sizing to border-box, the width of the space actually occupied by the element is equal to the width we set. If you set the border and spacing, the border and spacing will expand inward. Let’s go through the original example again. (Please forgive me for being obsessive-compulsive and I still pursue perfection)

<div id="bx1" style="width:300px;height:300px;background:blue;">        <div id="bx2" style="width:100px;height:100px;background:red;margin:0px auto;color:white;box-sizing:border-box;">hello</div></div>

Initial image without borders and spacing:

Now Add a new div for comparison. The only difference from the original div is the addition of a 10px wide yellow border;

<div id="bx1" style="width:300px;height:300px;background:blue;">        <div id="bx2" style="width:100px;height:100px;background:red;margin:0px auto;color:white;box-sizing:border-box;">hello</div>        <div id="bx3" style="width:100px;height:100px;background:red;margin:0px auto;color:white;box-sizing:border-box;border:10px solid yellow">hello</div></div>

The result is as shown: the border expands inward

Then we add 10px padding to the div;

#bx3{padding:10px;}

The result is as shown: the padding expands inward, pay attention to " hello" position.

I think everyone should be clear about these two attributes.

Now to summarize, box-sizing has three values: context-box, border-box and inherit. Content-box is the default value of box-sizing, which means the actual space width occupied by the element = what we set Width (width) is the inner spacing of the border. After we set the width of the div, we then add the border and spacing. The border and spacing expand outward. The width of the space actually occupied by the border-box element is equal to the width we set. If the border and spacing are set, the border and spacing will expand inward. As for the inherit attribute, everyone should know that it inherits whatever attribute it has.

It was originally a very small thing, but after so long, I finally asked the world to turn out perfectionists and obsessive-compulsive disorder patients, we are innocent