A brief discussion of the interesting box model of CSS3 box-sizing property

Everyone must know the composition of the box model, from the inside to the outside: content, padding, border, margin.

There are two standard box models, one is the standard model and the other is the IE model.

From the above two pictures, it is not difficult to see that in the standard model, the width and height of the box model are just the width and height of the content.

In the IE model, the width and height of the box model is the total width and height of the content + padding + border.

How to set two models in css

The CSS3 property box-sizing (default value: content-box) is used here.

/* Standard model */ 
 box-sizing:content-box;
  /*IE model*/
 box-sizing:border-box;

content-box: This is the behavior for width and height specified by CSS 2.1. Specifying the width and height of an element (min/max properties) applies to the width and height of the box. The padding and border of an element are laid out and drawn except for the specified width and height

border-box: Specify width and height (minimum/maximum properties) to determine the element's border box. That is, specifying the width and height of an element includes specifying padding and borders. The content width and height are calculated by subtracting the width of the border and padding on both sides from the specified "width" and "height" properties.

Test reference cases

The ideal effect and code are as follows:

.input { width: 146px; height: 36px; line-height: 36px; background: transparent; border: 2px solid #0D349A; color: #bdbdbd; padding-left: 10px; padding-right: 30px; font-size: 14px;
box-sizing:content-box; (default optional)} 

When applied in a project using the bootstrap framework, I found that the default box-sizing: border-box; in the bootstrap.min.css style would interfere with the width and height of the search box.

* { -webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
 box-sizing: border-box;}

This property causes the page to appear like this:

.input { width: 146px; height:
 36px;
 line-height: 36px; 
background: transparent; 
border: 2px solid #0D349A;
 color: #bdbdbd; padding-left: 10px;
 padding-right: 30px; 
font-size: 14px; box-sizing:border-box;} 

At this time, if you want to achieve the ideal effect, you must adjust the style to:

.input { width: 190px;
 height: 40px; line-height: 
40px; background: transparent; 
border: 2px solid #0D349A;
 color: #bdbdbd; padding-left: 10px; 
padding-right: 30px;
 font-size: 14px; 
box-sizing:border-box;}

PS Tips: When a container width is defined as width:100%;, if padding or border is added, it will overflow the parent container and expand outwards.

If you use this style and specify box-sizing: border-box; then the padding and border will no longer overflow, but shrink inwards. This effect feels very practical.

Summarize

The above is the editor’s introduction to the interesting box model of CSS3 box-sizing attribute. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time!