preface

Recently, I am reading CSS World by Zhang Xinxu, sorting out and sharing my study notes. In this article, we will briefly learn about width and height, and we will introduce the box model in more detail later.

Block-level elements and inline elements

First, let’s make a brief distinction between the two:

  • Block-level elements
    • Block-level elements have a single row (vertical from top to bottom) on the page
    • The default width is the entire width of the parent element.
    • Default height is supported by content (child elements)
  • Inline element
    • Inline elements do not occupy a single line of the page, only their own size
    • Inline elements are arranged horizontally left to right on the page. If not all of the inline elements can fit on one line, the elements are moved to the second line and continue to be arranged left to right.
    • The default width and height of inline elements are stretched out by the content

We can change the default HTML Settings by using the display attribute.

External box and container box

Each element has two boxes, the outer box and the container box. The outer box is responsible for whether the element can be displayed on a single line or only on a newline. The container box is responsible for the width, height, content and so on.

The box size

Box size is the container box mentioned above, which consists of margin box, border box, padding box and Content box

Horizontal box size composition:

  • margin-left
  • border-left
  • padding-left
  • width
  • padding-right
  • border-right
  • margin-right

And the equation: Margin left + border left + padding left + width + padding right + border right + margin right == If the sum disproves the equation, it is called overconstrained and the equation adjusts automatically

Adjustment:

  • If none of these seven values are zeroautoThe browser automatically adjusts the margin-right value so that the equation is satisfied
  • If there are any of these seven valuesautoIn the case, please
    • Three of these seven values can be set toauto ， width.margin-left.maring-right
    • If some value is zeroautoIs automatically adjusted toautoTo make the equation true
    • If multiple values areauto, priority adjustmentwidthAnd thenmargin-left 与 maring-rightThe remaining space will be divided equally

Margin-right: 10px; But the browser still uses margin-right to fill in all the remaining width.

Width separation principle

The principle of width separation is that CSS widht does not coexist with the padding, border (and sometimes margin) attributes that affect the width.

The main approach is to use width as a separate layer of labels, while padding, border, and margin are internally adaptive rendering using liquidity.

To solve the problem, the padding, border and margin will affect the width of the element. The use of width separation can reduce the complexity of the element layout, reduce the operation and facilitate the later maintenance.

box-sizing

Width is used by default in the content box, which can be changed by box-sizing.

Box-sizing Browsers mainly support content-box and border-box.

height: 100%

Set child element height: 100% must make the parent element set a valid height value, otherwise the height is 0.

The reason is that height defaults to auto and cannot be computed with percentages.

min-width/max-width 和 min-height/max-height

The default values of min-width and min-height are auto

The default value of max-width and max-height is none

Conflicts between width and height invalidate width and height

When min-width and max-width, min-height and max-heigh conflict, min-* is used

Ghost blank nodeshrut

In the inline box model, each row box is preceded by a “blank node” that occupies height but is 0 in width.