Home > Article > Web Front-end > Common css units_html/css_WEB-ITnose
Common css units_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:341306browse
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.
??