The CSS box model is essentially a box that contains HTML elements. Div, SPAN, and A are boxes. However, images and form elements are considered text, not boxes. It makes sense, for example, that an image doesn’t have anything in it; it is its own content.

The box consists of four attributes: content, padding, border, and margin.

  • Content: The contents of the box, which displays text and images
  • Padding: Clears the area around the content
  • Border: The border around the content and inside margin
  • Margin: Clears the area outside the border, and the margin is transparent

Tip: A background applies to an area consisting of content and an inner margin and border.

I. Classification of box models

Box models fall into two categories, namely W3C box model (standard model) and IE box model (weird box model).

W3C Box Model (Standard Box Model)

IE Box Model (Weird Box model)

2. Box-sizing attribute of box model

  • Standard box model:box-sizing: content-box;
  • Weird box model:box-sizing: border-box;

Three, the difference of box model

The difference between the standard box model and the weird box model is that the width and height are calculated differently.

3.1 Standard box model

The width/height of the standard box setting only contains the width/height of the content box content.

  • width = contentWidth
  • height = contentHeight

Let’s take an example:

div {
    width:200px;
    height:200px;
    padding:50px;
    border:10px solid yellowgreen;
    margin:50px;
}
Copy the code

As can be seen from the picture,

  • Content: 200 px
  • Padding: 50 px
  • Border: 10 px
  • The actual width of div = Content + padding * 2 + border * 2 = 200 + 50 * 2 + 10 * 2 = 320px

At this point, we found that we wanted the actual width and height of the box to be 200px, but now it is 320px, which obviously does not meet our expectations. What should we do?

Don’t worry, we can calculate the content width according to a formula:

ContentWidth = Expected width - paddingLeftWidth - paddingRightWidth - borderLeftWidth - borderRightWidth

3.2 Weird box model

The width/height of the weird box contains not only the width/height of the content box, but also the width/height of the padding and border.

  • width = contentWidth + paddingLeftWidth + paddingRightWidth + borderLeftWidth + borderRightWidth
  • height = contentHeight + paddingLeftHeight + paddingRightHeight + borderLeftHeight + borderRightHeight

Also, let’s take a look at the width in weird box mode using the above example:

div {
    width:200px;
    height:200px;
    padding:50px;
    border:10px solid yellowgreen;
    margin:50px;
}
Copy the code

As you can see, in weird box mode, the width we set is the actual width of the box, and the content area is automatically calculated to be 80px by 80px.

Added point

The calculation of the padding

For an element, we’re not sure what its width or height is, but if we want to display it in a ratio of 4:3, for example, we can use padding to calculate the height.

Padding can be used to dynamically determine the height by setting the percentage using the parent element's width property.

.parent {/* parent element width */ width: 600px; position:relative; } .child { width:100%; padding-top:75%; }Copy the code

The padding-top attribute is 75%, which is calculated from the width of the parent element. Height = 600px * 75% = 450px. Also, the percentages of width and height are 100% and 75%, which meet our 4:3 ratio requirement.

The calculation of margin

Similarly, when we set the percentage of the margin attribute of an element, it is also calculated according to the width attribute of the parent element.

.parent { width:400px; height:600px; } .child { margin:10% 20%; // equivalent margin:40px 80px; }Copy the code

The parent element’s width attribute is used to evaluate the parent element.