Some pre-knowledge

Replace/non-replace elements

Replace the element

Elements that do not directly display the contents of HTML elements, such as IMG, input, iframe, and so on

Replace element size

The default width and height of video and iframe are 300px and 150px, and the default size of img is 0. The default size of the image after loading is the original size of the image. The width and height can be set by using the width and height properties or CSS

Nonsubstitutive element

Element content is displayed directly in the box generated by the element, such as div, SPAN, and so on

Block level/inline elements

Block-level elements

By default, the width covers the content area of the parent element (box model), occupying only one line (i.e. before and after newlines)

Inline elements

Width is the default for wrapping the content, width and height are not valid for non-replacement elements in the line, vertical padding and border are displayed but do not affect the layout, and vertical margin is invalid

The sample

span {
  line-height: 60px;
  border: 2px solid;
  font-size: 12px;
  background: green;
  padding: 10px;
  margin: 30px;
}
Copy the code

As you can see, the height of each line is controlled only by line-height and produces line spacing; Border and padding work horizontally, vertical only displays (as shown by background and border); Margin works in horizontal direction, but not vertical direction; Background extends into the border (same block-level element, visible when the border is set to transparent)

Some basic concepts

Anonymous inline text

A string that is not in any inline element

The sample

<div> This is anonymous inline text <span>hehe</span> </div>Copy the code

Em box (character box) and content area

For non-replacement elements

Em box height = FONT-size (not equal to the actual render size, which depends on the font) = 1EM Content area consists of em boxes strung together

Pair of substitution elements

The EM box does not exist

Text baseline

It can be understood as the lower edge of the lowercase x

Line spacing

Generated by the line-height property (as shown, the gray box is the line spacing)

For non-replacement elements

Word-break = word-break = word-break

Pair of substitution elements

Line-height does not directly affect the replacement element layout (only if the replacement element’s vertical-align is set to a percentage, see below)

Inline box inline – box

For non-replacement elements

Inline-box height = line-height

Pair of substitution elements

Inline-box height = element height + vertical padding + vertical border + vertical margin See the inline-box height of the replacement element containing margin)

Line box

The vertical direction contains the upper and lower boundaries of all inline-boxes in a row, whose final height is affected by the vertical-align element in the row (because vertical-align causes inline-boxes to move vertically).

Ghost blank node

Each line box is preceded by a virtual inline blank node with a width of 0. Font-size and line-height inherit from the parent element. See below for the specific functions of ghost blank nodes.

Detailed description of important CSS properties

font-size

Specifies the height of the text em box (the actual display size of the font is determined by the font)

As shown in the figure, the solid line frame is the EM frame, and the dotted line frame is the content area formed by the EM frame

  • When set to em and percentage, use the parent element font size (for example, the parent element font size: 20px, the child element font size: 0.5em, the actual child element font size is 20 * 0.5 = 10px)
  • Font-size: 1em; font-size: 1em;

text-align

Sets the alignment between one or more line boxes formed by inline elements

For blocks, inline-block elements (inline-block is inline externally and block internally) are inheritable

  • Left (default)
  • right
  • center
  • Justify (Text in line box is automatically aligned to both sides by user agent control, the last line is not valid)

The sample

text-align: center;

When only one row box is formed inside, the whole row box is centered

When multiple line boxes are formed, align the lines in the center

text-align: justify;

Multiple line boxes are aligned to the left and right. The last line is invalid

line-height

Set the line height

For non-replacement elements, line-height = font-size + (evenly divided) line spacing = inline-box height

Can be used for any element inheritable only directly affecting inline non-replacement elements

  • Normal (default) 1.2 in general user agents
  • Font-size = 2.5; font-size = 2.5; font-size = 2.5
  • The length is 1.5em, 18px, etc., inherited by the calculated value (i.e. the parent element’s line-height px value is calculated first and then inherited by the child element).
  • Font -size = 50% * font-size

Line-height does not apply directly to block-level elements, but determines the minimum height of the inner row elements to form a row box

Due to the presence of a “ghost blank node” at the front of the line box, which inherits the line-height of the parent element (that is, the outer block-level element), this node forms an inline-box with the height of line-height, and the line box needs to contain the upper and lower boundaries of all inline-boxes in the line. So that determines the minimum height of the line box

vertical-align

Specifies the vertical alignment of inline elements in their row box

Can only be used for inline elements and replacement elements cannot be inherited

Let’s start with two concepts

Element baseline

Non-replacement is determined by the font and can be understood as the lower edge of the lowercase letter X replacing the element with the bottom of its inline-box

Line box baseline

You can insert a virtual lowercase letter “X” in the ghost node, and the baseline of the line box is the bottom of the letter “X” because the virtual letter “X” can’t set its vertical-align, and vertical-align doesn’t inherit, So the vertical-align value of this virtual node is always the default baseline, so it can represent the baseline of the row box

  • Baseline (default) Element baseline is aligned with line box baseline
  • The vertical center of the middle element inline-box is aligned at 0.5ex above the line box baseline (ex is calculated relative to the parent element, while the virtual letter X in the ghost node inherits from the parent element, so it can also be understood as the vertical center of x in the ghost node)
  • The length element baseline is aligned at the given length above the line box baseline
  • The percentage element baseline is aligned with the given percentage above the line frame baseline * its own line-height.
  • The top element is inline-box aligned with the top of the line box
  • The bottom element of the inline-box is aligned with the bottom of the line box
  • The top of the text-top element inline-box is aligned with the top of the content area of the parent element (that is, the content area of the virtual letter X in the ghost node or the EM box)
  • The top of the text-bottom element is aligned at the bottom of the inline-box and the content area of the parent element (that is, the content area of the virtual letter X in the ghost node or the EM box)

display: inline-block;

The inline element externally behaves as an inline element, while the inline element internally behaves as a block element in the row box

The inline – block of the baseline

If an inlin-block element contains an inline element, the baseline is the baseline of the last line box in the element

If there is no inline element inside the inlin-block element, the baseline is the bottom of the margin-box of the inline-block element