CSS: Box model

In CSS, the box model is divided into two types: the Standard model and the weird model

Standard Model: Total width =border+padding+ content area width

Weird model: Total width = width, this width includes border,padding and content area width

In the standard model, border and padding will support the box, which is disastrous for the layout of the Web, because it will push the other elements away.

In the weird model, border and padding do not hold large boxes, but squeeze the boxes inward, squeezing the width of the content area.

Convert Standard Model: No conversion, default is Standard Model

Turn weird model: Box-sizing:border-box;

CSS: Box model