In yesterday’s article – “Youth Camp” as an interview question review of front-end basics CSS chapter 2 CSS box model of interesting points of knowledge

I talked about two very interesting points about the box model. Today I will make an in-depth study of these two contents. (I happened to see two related interview questions ~)

[1] Problems with the standard box model

  • W3C standard box model

Box model = margin + border + padding + width (total width of block elements in box model = content)

  • IE box model

Box model = margin + width (total width of block elements in box model = border + padding + content)

[2] Box-sizing attribute in CSS3

This box-sizing property is a new feature in CSS3, and it’s very interesting to see how it works, but it doesn’t really matter what the interview question is. I’m going to write a separate article about this interesting property and take a hands-on approach to it

You can see it’s a pretty good article

So let’s make the first point clear in this article

1. Two interview questions that are a bit of word play

[1] “Total width of block elements” “Total width of box model”

What is the total width of the block elements in the standard box model

There is a picture and there is a truth

【 Title from niuke.com 】

The answer:

In the standard box model

  • The width of the block element is Content!

  • And the total width of the box model is D which is content + 2*(padding+border+margin)

The picture above deepens the impression

W3C standard box model

And IE box model we need to understand

Because it comes up in the next one!

[2] Total width of standard box /IE box model

Answer first:

  • The total width of the standard box is left and right margin + left and right border + left and right padding + width.

  • The total width of IE box is left and right margin + width (IE box model width is left and right border + left padding + content)

Here is the connection with the above content! (Just look at the picture above.)