CSS second bullet concept introduction!

Crucial!

A few key concepts:

  • Document Flow Normal Flow
  • Block, inline, inline block
  • Margin merging
  • Two box models (border-box is used more)

1. Document flow direction

Flow direction

  • Inline elements go from left to right, and line breaks only when they reach the right
  • Block elements start on a separate line from top to bottom
  • Inline-blocks are also left to right, but elements are not truncated because they have boundaries

The width of the

  • The inline width is the sum of internal elements and cannot be specified by width
  • Block automatically calculates the width by default, usually one line long, specified by width
  • Inline-block uses width

highly

  • Inline height is determined indirectly by line-height, regardless of height
  • The block height is determined by the internal document flow element and can be set to height
  • Inline-block is similar to block in that you can set height

Display :inline-block; Specifies the element type. There is no absolute element type

2. The overflow overflow

When the contents are larger than the container,

Overflow occurs if the width or height of the contents is larger than the container

Use the overflow property to set whether to display the scroll bar

.rainbow {
  overflow: auto;
  height: 200px;
  border: 2px solid;
}
Copy the code

  • Auto: automatically set (this graph overflows, so it is automatically set to scroll)

  • Scroll: rolling

  • Hidden: Hides the overflow

  • Visible: Shows the overflow part directly

Note: Overflow can be set to overflow-x and overflow-y

3. Get out of the document stream

The block height is determined by the internal document flow element and can be set to height

But some elements can be left out of the document flow

Use the following attributes to get out of the document flow:

  • float
  • position:absolute/fixed

4. The box model

There are two types of CSS box models: Content-box and border-box. Width indicates the width of the content area, excluding the padding and border. Width represents the sum of the content area + padding + border. The latter is generally preferred.

5. Margin to merge

Generally upper and lower margins are merged

  • Father-son margin merge
  • Brother margin merge

The merge is designed for convenience instead of dividing the target width by 2

Solutions:

1. Father-son merger

  • With padding/border
  • Cover with overflow: hidden
  • With the display: flex

2. Brothers merge

  • Use the inline – block