Introducing the latest length units in CSS3

Explanation of marks:

Numbers are marked with doubts

Try to give the English translation after the proper name, because the official The documentation is basically in English. There may be differences and ambiguities after translation by various readers.

Overview:

em: The font size relative to the text within the current object. Font size relative to parent node

rem: Font size relative to root element . Application scenario: The layout is determined by text content.

vh and vv: 1vh is equal to 1/100 of the viewport height^①, 1vw is equal to 1/100 of the viewport width.

vmin and vmax: Regarding the minimum or maximum value of the viewport height and width, vmin is equal to the minimum value of 1/100 of the viewport width and height. Application scenario: Make an element always visible on the screen.

ch: the width of the number 0

ex: the height of the lowercase x letter of the current font or 1/2 of 1em^②. Application scenario: Shangshi superscript and subscript

Extracted information:

1. font-size: If not declared, the attributes of the parent node will be inherited

Extension:

①window, document, body width and height:

The body height is the height of the body element (including border scroll bars, etc.), and the surrounding default With 8px margin

If the color is not set for the html and the color is set for the body, the color of the body will fill the entire background

The viewport refers to the visible range of the browser, except The document display area of ​​borders, scroll bars, and toolbars

②How can 0.5em be equal to 1ex?

After actual testing, it was found that the performance of setting 0.5em and 1ex is slightly different. After all, the lowercase x letters are not equal to half the font size font-size. Of course, it cannot be ruled out that there is a font that just meets this condition

relative: it will be offset at the appropriate position. The original position of dom is retained

The above is the detailed content of Introducing the latest length units in CSS3. For more information, please follow other related articles on the PHP Chinese website!