Substitution and non-permutation elements of CSS

A pit from the interview.

In the interview, the examiner first asked the line element and block-level elements of the difference, this is not difficult to understand. Then one foot stepped into the pit of the replacement element. For example, an IMG is an inline permutation element, and the inline element can be set to a wide height.

What is a permutation element

One content is not controlled by the CSS visual formatting model, and the CSS rendering model does not take into account the rendering of this content, and the elements themselves typically have fixed dimensions (width, height, aspect ratio) elements.

The width of the inline-level displacement element

For inline-level non-displacement elements , the height and width settings are not applicable, and the margin and padding settings in the vertical direction are not used. 、

For inline -level displacement elements , Width:

• If the width is high or the width is auto, and the element has an intrinsic width, then width is the intrinsic size:
• If the width is set to auto, but the height has a value other than auto, and the element has a fixed aspect ratio: width = height * Fixed aspect ratio.
  • If IMG only sets the height, the width is calculated proportionally
• If the width is set to auto and does not meet the above criteria, the width is used with a value of 300px.
  • such as: Iframe,canvas

The height of the inline-level displacement element

For inline-level non-displacement elements , the height and width settings are not applicable, and the margin and padding settings in the vertical direction are not used. 、

For inline -level displacement elements , Height:

• If the value of wide or high is auto, and the element has an intrinsic height, the height is the intrinsic width
• If the height is set to auto, but the width has a non-auto value, and the element has a fixed aspect ratio: height = width/fixed aspect ratio.
• If the height is set to auto and does not meet the above conditions, the value of height cannot be greater than 150px and the width cannot be greater than twice times the height.

Common intra-line displacement elements

<input> <textarea> <select> <object>

Substitution and non-permutation elements of CSS