CSS box model

Two box models

  1. Content-box: The width is just the width of the content
  2. Border-box: Width includes the width of the content + padding + border
  3. Content-box: The width is just the width of the content

For example, if you write the following code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> .content-box { margin:25px; border: 5px solid red; padding: 10px; box-sizing: content-box; width: 100px; } .border-box { margin:25px; border: 5px solid red; padding: 10px; box-sizing: border-box; width:100px; } </style> </head> <body> <div class="content-box"> content box </div> <div class="border-box">Copy the code

Although both boxes are set to the same width of 100Px, you can see that the widths of the two box models are different

Content box box model: Only the content width is 100px,

Box model: Padding + border + Content = 100px

Online test connection:

Js.jirengu.com/ridagabubu/…

Border – box better use

What is the CSS box model

Refer to the answer

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.

Margin merging

Brothers merged

The margin-bottom of the first div is merged with the margin-top of the second div

Father and son combination

The top margin of the parent will overlap with the top margin of the first child, and the bottom margin of the parent will overlap with the bottom margin of the last child

\

This margin merge only exists with upper and lower margins, and left and right margins do not merge

Cancel Margin merge

For sibling merge: use display:inline-block

For parent-child mergers:

  • The first method is to add parent to Border,
  • The second method is to add Padding to the parent

Margin can be merged because there is nothing else between the parent and child’s margins. If you add a border or Padding, you add something between the parent and child’s margins, so it cannot be merged

  • The third way is to add overflow:hidden to parent

\

\

\

\

The basic unit

  • The length of the unit
    • px
    • Multiple of em relative to its own font size

\

\

Application: Draw a rainbow

Js.jirengu.com/feladihete/…

Conclusion:

  1. Resolve margin merges with Overflow: Hidden
  2. Parent div represents all divs under parent