css-standard box model & weird Box model

Box model category in CSS

The box model in CSS is divided into two categories:: The Standard and IE standard box models.

Most browsers use the Web-Consortium standard Model, while IE uses Microsoft's own standards.

The weird mode is "some browsers support the standard of the consortium while retaining the original parsing mode", the strange mode is mainly in the IE kernel browser.

When DOCTYPE is not defined, strange patterns are triggered.

in standard mode, the total width of a block = width + margin (left) + padding (left) + border (left or right )

in weird mode, the total width of a block = width + margin (that is, width already contains padding and border values)

CSS3 's box-sizing

Box-sizing Syntax:

Box-sizing:content-box | | Border-box | | Inherit

when set to Box-sizing:content-box, the standard mode is used to parse the calculation and the default mode.

when set to Box-sizing:border-box, the odd mode is used to resolve the calculation.