Introduction
According to whether the "external box" is inline or block level, we can divide elements into inline elements and block level elements, and according to whether they have replaceable content, we can also divide elements into replacement elements and non-replacement elements. By modifying the value of an attribute, such as the "src" attribute of <img> and the "type" attribute of <input>, the rendered content can be changed, which is called a replacement element, such as: <img>, <input> >,<textarea>,<select> and so on, among other things, it has the following features:
(1) Replacement elements are all inline elements
(2) The baseline of the replacement element such as <img> is located at the lower edge of the element, and the default value of "vertical-align" is baseline alignment, so there will be a gap of several pixels below the image; while the <input> type can be input The baseline of the text replacement element is actually the baseline of the input text, which is similar to the inline-block-level element. If there is no text inside an inline-block-level element whose "display" is "inline-block", then its baseline is the element the bottom edge of the , if there is text, then its baseline is the baseline of the inner text
(3) The size of the replaced element is divided into 3 categories: intrinsic size, HTML size and CSS size. Intrinsic size refers to the original size of the replacement content; HTML size refers to the size set on the HTML attribute, which will override the intrinsic size; CSS size is the size set in the CSS style, which will override the intrinsic size and HTML size .
If only the width or only the height is set, the element will be displayed in the aspect ratio of its native size;
The size of inline replacement elements and block-level replacement elements is calculated using the same set of rules above, that is, even if the replacement element is set to {display:block;}, its width will not fill the parent container;
(4) Replacing elements can stretch the line box, but does not affect the line height. As we all know, the height of inline elements is only determined by the line height "line-height", the vertical "margin", "border" and "padding" do not affect the height of the line box, but the performance of the replaced element is the same as {display:inline- block;} The inline block-level elements are more similar, that is to say, replacing the vertical "margin", "border" and "padding" of the element can stretch the line box;