This is the 15th day of my participation in the August More Text Challenge

In CSS, all elements are surrounded by “boxes”. We use two types of “boxes” extensively — block boxes and inline boxes.

What is the CSS box model?

In CSS, the box model is used in design and layout.

The definition of a box model can be broken down into the following parts:

  • Content box: This area is used to display content, size can be setwidth 和 height.
  • Padding box: a blank area surrounding the content area; Size bypaddingSet related properties.
  • Border box: Package contents and inner margins. Size byborderSet related properties.
  • Margin box: This is the outermost area, the empty space between the box and the other elements. Size bymarginSet related properties.

Block-level boxes use the CSS box model in its entirety, and inline boxes use only part of the content defined in the box model.

box-sizing

The box-sizing attribute defines how the browser should calculate the total width and height of an element.

  • content-box(Default value), the standard box model,width: 100pxThis means that the content area will be 100px wide.
    • Box size =content(100px) + padding + border
  • border-box, the alternative (IE) box model,width: 100pxRefers to theContent area + border + inside marginThe sum is 100px wide.
    • Box size =content + padding + border = 100px

In either case, margin doesn’t take into account the actual size — of course, it affects how much space the box takes on the page, but it affects the space outside the box.

display

An additional concept can be added here — internal and external display types.

  • External display typeWe passed the boxdisplayProperty Settings, such asinlineorblock, to control whether the box is inline or block-level.
  • The inner display type, which determines how the elements inside the box are laid out.

If you set display: flex, on an element the external display type is block, but the internal display type is changed to flex. All the immediate children of the box become Flex elements and are laid out according to the rules for elastic boxes.

There is also a special value — display: inline-block, which provides an intermediate state between the inline and the block. This is useful in cases where line breaks do not occur, but the width and height can be set, that is, part of the block-level effect is achieved:

  • Set up thewidth 和 heightProperties are in effect.
  • padding.margin, as well asborderWill push away other elements.

Inline elements/block-level elements

In HTML4, elements were divided into two main categories: inline (inline elements) and block-level elements.

1. What are inline elements?

An inline element occupies only as much space as the border of its corresponding label.

Common inline elements are A, B, SPAN, img, strong, sub sup, button, input, label, SELECT, and Textarea

2. What are block-level elements?

Block-level elements occupy the entire space of their parent element (container), so a “block” is created. Typically, browsers start a new line before and after a block-level element.

Common block-level elements are div, ul, OL, Li, DL, dt, DD, H1, H2, H3, H4, H5, h6, and P

3. The difference?

  • Formatting (by default), inline elements are not wrapped, while block-level elements are wrapped.

  • Content (by default), inline elements can only contain data and other inline elements. Block-level elements can contain inline elements and other block-level elements.

  • In attributes:

    • Inline elements
      • width 和 heightSetting invalid (line-height can be set),
      • Padding (padding), margins (margin) and border (border) inUp and down directionThere is no effect on other elements.
    • Block-level elements
      • width 和 heightAttributes can come into play,
      • Padding (padding), margins (margin) and border (border) pushes other elements away from the current element

Margin folds

The margin-top and margin-bottom margins of a block are sometimes merged (folded) into a single margin of the maximum size of a single margin (or only one of them if they are equal). This behavior is called margin folding.

What does it take

Vertical margins of two or more adjacent block elements in a normal stream collapse

  • Adjacent: is not separated by non-empty content, padding, border, or clear
  • Vertical: means that only vertical margins will

How to solve it?

  • The element that creates the BFC and its child/sibling elements do not collapse

  • Set the padding/border, some specific scenes:

    • The margin-top of the parent element overlaps the margin-top of the child element.

      The overlap happens because they’re adjacent, so we can use that to solve the problem. We can separate parent elements with border-top and padding-top values.

    • The margin-bottom of the parent element of height auto overlaps the margin-bottom of the child element.

      Overlap occurs either because they are adjacent to each other, or because the height of the parent element is not fixed. Therefore, we can set border-bottom and padding-bottom for the parent elements to separate them. We can also set a height for the parent elements. Max-height and min-height also solve this problem.

    • It is an element that has no content, its margin-top and margin-bottom overlap.

      We can solve this problem by setting the border, padding, or height.

The triggerBFCThe factors

  • float(except none)
  • overflow(Except visible)
  • display(table-cell/table-caption/inline-block)
  • position(except static/relative)

Old drivers learn CSS again

  • The box model
  • Flex
  • What is BFC & IFC
  • Grid