Use of the Box-sizing property in CSS3

Where inherit indicates that the value of box-sizing should inherit from the parent element.

The main difference between Content-box and Border-box is that the value of the element's width and height package does not include the values of the border, padding, or both.

First, Content-box

Content-box is also called the standard box model, which is the default value.

Its width consists only of content areas (excluding padding and border regions)

For example, if the width of the element is 100px, then this means that the content area of the element is 100px wide, and if padding is 10px,border width is 10px, then its actual width is width+ (padding-left) + ( Padding-right) + (border-left-width) + (border-right-width) =100px+10px+10px+10px+10px=140px;

Is the standard box model:

Standard box model

Second, Border-box

Border-box also called IE box model

Its width consists of the content area, the padding region, the border region

For example, if the width of this element is 100px, then its actual width is 100px, then if its padding is 10px,border width is 10px, then the content area width of the element is width-(padding-left)-( Padding-right)-(Width-left-width)-(width-right-width) =100px-10px-10px-10px-10px=60px;

is the IE box model:

IE Box model

Use of the Box-sizing property in CSS3