1. The CSS box model

Knowledge forward

Let’s take a look

Composition of the CSS box model

Boxes are divided into block-level boxes and inline boxes. The two types of boxes exhibit different behavior in terms of page flow and relationships between elements

  • Block-level box

  • Inline boxes

It’s fun to push other inline boxes but not block boxes

There’s an interesting point here that I didn’t notice before

The area occupied by the box model can be changed

  • Default box model width height —

Height = width/height + padding + margin + border

However, we can modify the default behavior of the browser

  • After modification —

Height = width/height = Content + padding + margin + border

That’s an interesting use! Box-sizing :inherit; Sets all elements to inherit this property

Use of inline block elements

This is the only thing known to exist here

Now you see the use of display:inline-block!

  • Don’t want to wrap this element (keep inline elements)

  • Want to set width height (block level element characteristic)

Here’s a review of the characteristics of inline elements

  • Can’t break

  • Width height is ignored

  • The padding works but does not change the relationship between other content and the inline box!

  • Margin is only valid for left/right direction, not up/down

This can be compared with the inner block element in the following row

Let’s look at two questions

[1] What are the values of display?

We just saw that block turns to a block element inline turns to an inline element inline-block turns to an inline block element

In fact, there are a lot of other content to wave summary! –

  • The default width of the block type is the width of the parent element. The width and height can be set.

  • The None element is not displayed and removed from the document stream.

  • The default width of an element type in an inline row is the width of the content.

  • Inline-block The default width of the inline block type is the width of the content, and the width height can be set.

  • List-item displays and adds style list tags like block type elements.

  • The table element is displayed as a block-level table.

  • Inherit specifies that the display property value should be inherited from the parent element.

[2] Introduce the standard CSS box model? What’s different about the box model for the lower version of IE?

Involve some old version of the content ~

1. There are two types – the old IE box model is now the standard W3C box model

The W3C box model has four properties: content, padding, margin, and border.

2. It’s fun if it’s different

Refer to this article standard W3C box model and IE box model (numerous mistakes)

  • The W3C box model

  • IE box model