CSS box model

What is box model

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

CSS determines the box’s size, location, and properties (such as color, background, border size… , etc.). The box model consists of content, padding, border, and margin.

  1. content: Limited by content boundaries, the “real” content of elements, such as text, images, or a video player.
  2. padding: the inside margin is responsible for extending the background of the content area (that is, the inside margin is transparent, subject tobackgroundAffects), fills the spacing between the content in the element and the border.
  3. border: Border, one or more lines around the inside margin of the element content, consisting of thickness, style, and color.
  4. margin: Margin, which extends the border area with white space to separate adjacent elements.

In CSS, the box model can be divided into:

  • W3C standard box model
  • IE weird box model

You can set the box model category by setting the box-sizing property. By default, the box model is the standard box model.

2. Content-box

  1. Width, height Dimensions

  • Width = width of the content

  • Height = height of content

  1. The box size
  • Box width = width + padding + border + margin
  • Box height = height + padding + border + margin
  1. Layout width offsetWidth
  • offsetWidth = width + padding + border

3. Border-box model of IE

  1. Width, height Dimensions

  • Width = border + padding + width of the content

  • Height = border + padding + height of content

  1. The box size
  • Box width = width + margin
  • Total box height = height + margin
  1. Layout width offsetWidth
  • offsetWidth = width

Fourth, box – sizing

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

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

// content-box Specifies the default value of the elementwidth/heightDoes not containpadding.border, consistent with the standard box model //border- box elementwidth/heightcontainspadding.border, consistent with the weird box model //inheritThe specifiedbox-sizingAttribute, which should be inherited from the parent elementCopy the code

reference

  • Developer.mozilla.org/zh-CN/docs/…
  • Developer.mozilla.org/zh-CN/docs/…