CSS knowledge points-replaceable elements vs non-replaceable elements

Replace element:

have intrinsic dimensions (intrinsicdimensions), they You can set the Width/height property , and there is no substantive content between them, that is, the code does not directly display (text content) . The replacement element is the browser based on its . The Replace element increases the height of the row box, but does not affect the line-height, the content area Height value = padding-top + padding-bottom + margin-top + margin-bottom + height. To center the replacement element, you can set line-height = height, vertral-align = Middle . The
(vertical-align:middle) aligns the vertical midpoint of the element's inline box with a point at 0.5ex at the parent element's baseline. Their nature is consistent with the elements that set the Display:inline-block. This means that these so-called replaceable elements are inline blocks .

Maybe some friends have some doubts about non-permutation elements (non-replaced Element), to help you understand a little bit. Non-permutation elements, there is no explicit definition, but we can literally understand that the non-permutation element corresponds to the permutation element (replacedelement), that is to say we understand the meaning of the permutation element, we understand the non-permutation elements. Permutation elements, which are defined in the list:

    "An elementthat are outside the scope of the CSS formatter, such as an image,embedded document, or Apple T "

From the definition we can understand that the permutation element (replaced elements) is mainly referred to as IMG, input, Textarea,select, object, etc. such as the default CSS formatting elements of the outer range . In turn, the non-permutation element (non-replacedelement) is an element other than an IMG, input, textarea, select, object, and other permutation elements.

Replace element:The replacement element is the browser based on itstag elements and attributes to determine what is displayed。
For example: <input/> type= "Text" is, this is a text input box, another time, the browser display is not the same.(X) , <input>, <textarea>, <select>, <object> in HTML are replacement elements, none of these elements have actual content.

The Replace element increases the height of the row box, but does not affect the line-height, the content area Height value = padding-top + padding-bottom + margin-top + margin-bottom + height.
To center a replacement element, you can set theline-height = height, vertral-align = Middle。
(Vertical-align:middle is the alignment of the vertical midpoint of the element's inline box to a point at 0.5ex on the parent element's baseline.) ）

Non-replacement elements:X Most elements of HTML are non-replaceable elements that theytell the browser the content directly and display it。
For example, <p>p content </p>, <label>label content </label>; browser will show this content directly.

Non-replacement elements add padding-top or padding-bottom without affecting the height of the row box, but the content area height changes, and Margin-top,margin-bottom has no effect on the row box. Adding left and right margins affects the horizontal position of non-replacement elements. To center a non-replacement element inside a parent element box, you canSet line-height = height of parent element box。

This article is from "Tian Jiang Technology blog" blog, please be sure to keep this source http://jiangtian.blog.51cto.com/10584819/1694074

CSS knowledge points-replaceable elements vs non-replaceable elements