A detailed description of box model and box model attribute box-sizing in CSS3

These two days, they're all small-knowledge points.

Because it's a little busy.
Although very simple, but in the overall summary of the principle, or to say
Today I'm going to take a look at this box model in CSS
And CSS3 can change the properties of the box model.

Box model

Box model is a model rule for calculating element dimensions
In our CSS, the box model is divided into two types

Standard box model

Under normal circumstances, we're using this standard box model.
The element size in the standard box model is calculated using the following method
element Actual width = width + padding (left and right padding size) + border (left and right border size)
element Actual height = height + padding (upper and lower padding size) + border (upper and lower border size)
The width and Height properties we set are actually the widths and heights of the content area of the element
After setting padding and border, the element size will become larger.

IE6 Promiscuous Mode box model

IE is always so different
In IE6 promiscuous mode (older version before IE6) also has its own box model
Its box model may be more suitable for us to understand
The width and Height properties We set are the actual widths and heights of the elements.
The calculation formula is as follows
element content Area width = width-padding (left and right padding size)-border (left and right border size)
element content Area height = height-padding (upper and lower padding size)-border (upper and lower border size)
Under the box model in IE6 promiscuous mode
After we set the width and height
The width of the element is settled.
Setting padding and margin will make the content area smaller

Again, the box model of IE6 is the standard box model, while the box model in IE6 promiscuous mode is non-standard
And no matter what kind of box model, it does not include margin margins.

Box-sizing

CSS3 added Box-sizing property
Allows us to specify what kind of box model to use for the element
Two attribute values

• Content-box "Standard box model" (default)

• Border-box "IE6 Promiscuous Mode box model"

Under our standard box model

. demo {    width:100px;    height:100px;    padding:10px;    border:5px solid black;    .....}

You can see that width and height are the size of our content area.
Added padding and border to increase the actual size of the element

Setting up Box-sizing:border-box to use the IE6 promiscuous box model

. demo {    width:100px;    height:100px;    padding:10px;    border:5px solid black;    .....    Box-sizing:border-box; /* Increment */}

When padding and border are set, the width and height of the content area are compressed to 70px*70px
The original size of the box is still 100px*100px

box-sizing Setting box model properties allows us to select the box model
We can make the layout more flexible.