In the process of writing this article to explore knowledge, I have deep feelings — ask Baidu if you don’t understand the problem, then ask the official documents

Let the authority of official documentation explain it to you!

1. Solve problems related to the two box models

Two days ago, I summarized a content in the PPT of the youth training camp

Two questions suddenly arise

  • What is the range of box models?
    • Width = left/right margin + left/right border + left/right padding + width

    • Width = left/right border + left/right padding + width

As explained in 2.2 below, both statements are ok (but I don’t think asking such an ambiguous question is likely to work!).

  • thisbox-sizing:border-box;What is it for?

In other words, the size of the box is intuitively determined by the width height and the padding does not stretch the box

2. Understand the basics of box models

How does this property affect the box model and apply it

Here we go through the MDN documentation – “What is the CSS box model” for authoritative learning

Components of a block-level box in CSS:

Note that the content box area mentioned in this example can only be set with width height ~ in the standard box model

3. The solution of two problems

3.1 Thinking about the standard box model and the scope of box model

The box model is now used by default in browsers

There are some interesting properties that are set up here and let’s look at them

Note: the following content is defined in the authoritative “MDN document” and summarized in my own language

(There is no question of principle.)

  • Set the content box using width height

  • The width/height + left/right padding + left/right border + left/right margin determines the size of the box

  • Standard box width = width + left/right padding + left/right border

(Only to find that the teacher in the youth training camp is an example in the MDN document ~)

  • Margin doesn’t count the actual size — of course it affects how much space the box takes up on the page, but it affects the space outside the box

Box ranges up to the border — does not extend to margin (as shown above)

So to solve the puzzle of a knowledge point is not to rely on brainless Baidu but personally in the document to explore the answer!

The content here explains the place that was so confusing yesterday!

  • The box range is border + inner margin + Content box

  • Margin does not count the size of the actual box model! But it can affect how much space the box takes up on the page.

Be suddenly enlightened

If you are still confused, just open up the document and take a look!

3.2 Replace (IE) box model & the use of box-sizing attribute

If you don’t read a document, you’re startled

Box-sizing :border-box

So why is it called the IE box model?

Internet Explorer initially uses the substitution box model by default, with no mechanism available to switch.

Later, IE8+ supported the use of box-sizing to switch ~

In addition to intuitively getting the size of the box, there is a usage scenario

As mentioned in the previous day’s article, box-sizing was introduced in CSS3 because you don’t want the padding to make the original box bigger

The border-box property is set to border-box to prevent the padding from enlarging the original box.

Let’s look at two examples

  • Use the substitute box model to set the width of the box to the width of the box

  • Canceling this property will cause the box to be stretched