Moment For Technology

CSS (4) The Box Model

Posted on Sept. 23, 2022, 3:49 p.m. by Hamish Richards
Category: The front end Tag: The front end

Block-level boxes and inline boxes

Before we get to the box model, let's talk about the two types of BOXES in CSS.

  • Block box
  • Inline box

In CSS, all elements are surrounded by boxes. They behave differently in page flows and relationships between elements.

Block-level box

  1. The box expands in an inline direction and takes up all the space available to the parent container in that direction, which in most cases means that the box is as wide as the parent container
  2. Each box will wrap
  3. The width and height attributes come into play
  4. Padding, margin, and border "push" other elements away from the current box

Unless specified, headings (h1, etc.) and paragraphs (p) are block-level boxes by default.

Inline boxes

  1. Boxes do not generate line breaks.
  2. The width and height attributes will have no effect.
  3. Vertical margins, margins, and borders are applied but do not push other boxes in the inline state away.
  4. Horizontal inner margins, margins, and borders are applied and push other boxes in the inline state away.

The a elements, span, em, and strong used as links are inline by default.

A box in between

display:inline-block

The element may not change to a new line, but it may set the width and height.

External display type and internal display type

The external display type controls whether the box is block-level or inline. For example, display:inlien, display:block, display:inline-block.

The internal display type controls the display type of elements inside the box. For example, display:flex controls the element inside the box to be of type Flex.

The Box Model

The full box model applies to block-level boxes, and only part of the content can be used for inline boxes.

There are also two types of box models:

  • Standard box model
  • Substitution box model

All have four attributes: Margin, border, padding, and Content.

Standard box model

Browsers default to the standard box model. In the standard box model, the set width and height apply to the content. Plus the padding and border determine the size of the box.

Margin does not count into the actual size. It affects the space outside the box. The box ranges up to the border.

Alternative (IE) box model

If you want to use alternative box models, set box-sizing: border-box.

The width of the replacement box model is equal to content+padding+border, so content=width/ height-padding - border.

If you want to use the substitute box model entirely, you can set:

html {
  box-sizing: border-box;
}
Copy the code

margin

Margins push other elements away from the box. Margins can also be set to negative values, which will overlap with other content. In both standard and alternative box models, margins are always added after the visible portion is computed.

Margin properties:

  • margin
  • margin-top
  • margin-bottom
  • margin-right
  • margin-left

Margin folding

For two elements with adjacent margins, larger Settings are retained and smaller ones are lost. It's not the sum of the two margins.

border

If using a standard box model, adding borders increases the entire width height.

If the alternative box model is used, adding borders will reduce the content.

The attributes of border are:

  • border

Set width, color, style

  • border-top
  • border-bottom
  • border-right
  • border-left

Set the width, color, and style of all edges

  • border-width
  • border-style
  • border-color

To set the width, color, and style of an edge, use a specific

  • border-top-witdh
  • border-top-style
  • border-top-color
  • border-right-witdh
  • border-right-style
  • border-right-color
  • border-bottom-witdh
  • border-bottom-style
  • border-bottom-color
  • border-left-witdh
  • border-left-style
  • border-left-color

padding

The internal and external distance cannot be negative, but must be 0 or positive.

The padding property has:

  • padding
  • padding-top
  • padding-bottom
  • padding-right
  • padding-left

reference

MDN:developer.mozilla.org/zh-CN/docs/...

Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.