Box models are essentially boxes. There are two main types: Content box (W3C box model) and Border box (IE box model), which are regulated by the CSS property box-sizing. It includes content, padding,border and margin. The content of the border box model is more convenient to write and relatively easier to implement.

The difference between the two box models (width contains different contents) :

1. Box-sizing :content-box; : Width = content.

2. Border-box (box-sizing:border-box) : Width = Content + padding + border