Home > Web Front-end > HTML Tutorial > Common css units_html/css_WEB-ITnose

Common css units_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:46:34
Original
1310 people have browsed it

1em=12pt

2em=24pt

body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

The font size in the div is 1.2em, which is the font that the div inherits from the parent element 1.2 times the size. Here, the font size of the body is 14px, then the font size of the div is 1.2*14=16.8px.

Note: Use em layer by layer to define the font size of nested elements


The solution is to replace em with rem

rem

The r in rem represents the root element, and its value is the font size set by the root element. In most cases, the root element is html.

html {

font-size: 14px;

}

div {

font-size: 1.2rem;

}


rem is not only suitable for font size, but also for grid layout.

width: 70rem; // 70 * 14px = 980px

You can use rem based on the font size of the html root element as the size unit of the entire grid layout or UI library, and then use it in other specific Em units are used where. This will give you more control over font size and scaling


letter-spacing and word-spacing

letter-spacing and Both word-spacing attributes are used to add whitespace to their corresponding elements. Letter-spacing adds space between letters, while word-spacing adds space between each word. Please note that word-spacing is not valid for Chinese.



letter-spacing

Syntax:
letter-spacing: normal | length
Parameters:
normal: Default interval
length: A length value consisting of a floating point number and a unit identifier. Negative values ​​are allowed. See length unit
Description:
Retrieve or set the space between text in the object.
This attribute will add the specified space after each word, but the last word will be excluded.
The corresponding script feature is letterSpacing.


word-spacing

Syntax:
word-spacing: normal | length
Parameters:
normal : Default spacing
length : A length value consisting of a floating point number and a unit identifier. Negative values ​​are allowed. See length unit
Description:
Retrieves or sets the number of spaces inserted between words in the object. For IE4 only available on MAC platform.
The corresponding script feature is wordSpacing.

Comparison:
letter-spacing defines the distance between words.
word-spacing controls the width of the space between words.


??

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template