What is it

When a document is laid out, the browser’s rendering engine represents all elements as rectangular boxes, according to one of the standard CSS Basic Box Models.

A box consists of four parts: Content, padding, border, and Margin

  • Content, the actual content, displays text and images

  • Boreders are one or more lines around the inside margin of an element’s content. They are made up of thickness, style, and color

  • Padding, the inner margin, clears the area around the content. The inner margin is transparent and cannot be negative, depending on the box’s background property

  • Margin, or margin, creates extra white space outside an element, usually an area where other elements cannot be placed

In CSS, the box model can be divided into:

  • W3C standard box model
  • IE weird box model

By default, the box model is the W3C standard box model

Standard box model

The standard box model is the browser’s default box model

  • Width + padding + border + margin;
  • Box height = height + padding + border + margin

That is, width/height is just the content height, not the padding and border values

IE Box model

  • Width = width + margin;
  • Box height = height + margin;

That is, width/height contains the padding and border values

How to set these two modes

  • Box-sizing :content-box
  • Box model: box-sizing:border-box

The box-sizing property in CSS defines how the engine should calculate the total width and height of an element

Grammar:

box-sizing: content-box | border-box | inherit:

  • Content-box defaults. The width/height of the element does not include padding or border, as in the standard box model

  • The width/height of the border-box element contains the padding and border, which are consistent with the weird box model

  • Inherit specifies the value of the box-sizing property, which should be inherited from the parent element