CSS Basics: Replacing elements and non-replacement elements

Brief introduction

Depending on whether the "outer box" is inline or block-level, we can divide elements into inline and block-level elements, and we can also divide elements into replacement and non-replacement elements depending on if they have replaceable content. This by modifying a property value, such as the ",<input>" attribute of the "src" attribute of , the rendered content can be changed by the element called the replacement element, for example: ,<input> <textarea>,<select>, among other things, it has the following features:

(1) The replacement element is an inline element

(2) The baseline of this type of replacement element is at the bottom edge of the element, and the default value for "Vertical-align" is the baseline alignment, so there are a few pixels of space below the picture, and the <input> The baseline of the replacement element for this type of input text is actually the baseline of the input text, which is similar to the inline block-level element, and if "display" is a "inline-block" inline block element with no text inside it, then its baseline is the bottom edge of the element, and if there is text, Then its baseline is the baseline of the internal text.

(3) The size of the replacement element is divided into 3 categories: intrinsic size, HTML size, and CSS size. The intrinsic dimension refers to the original size of the replacement content; The HTML dimension refers to the size that is set on the HTML attribute, which overrides the intrinsic size, and the CSS size is the size that is set in the CSS style, which overrides the intrinsic size and the HTML size.

If the width is set only or if only the height is set, the element is displayed at a width-to-height ratio of the intrinsic size;

The dimensions of inline replacement elements and block-level replacement elements are computed using the same set of rules above, that is, even if the replacement element is set to {Display:block;}, its width does not fill the parent container;

(4) The replacement element can open the row box, but does not affect the row height. As we all know, the height of inline elements is determined only by the row height "line-height", the vertical "margin", "border" and "padding" do not affect the height of the row box, but the performance of the replacement element with {Display:inline-block;} Inline block-level elements are more similar, that is, replacing the element's vertical "margin", "border" and "padding" can open the line box;

CSS Basics: Replacing elements and non-replacement elements