Hello, I’m Pippi and today I’m going to share some front end knowledge with you.
1. Understand CSS units
Length can be measured in absolute units such as pixels, points, etc., or relative units such as percentage (%) and EM units.
Specifying CSS units is required for non-zero values because there are no default units. Missing or ignoring units will be considered an error. However, if the value is 0, the unit can be omitted (after all, zero pixels is the same as zero inches).
Note: Length refers to distance measurement. Lengths include numeric values followed by units such as 10px, 2em, 50%, etc. There must be no space between numbers and units.
2. Unit of relative length
The unit of relative length specifies the length relative to another length attribute. Relative unit is description: em current font size.
Ex: X height of the current font.
Em and EX units depend on the font size applied to the element.
1. Use em units
The value of em is equal to the calculated value of the border-size attribute of the element that uses it. It can be used for vertical or horizontal measurements.
For example, if the font-size element is set to 16px and the line-height is set to 2.5em, then the line-height pixel is calculated as: 2.5x 16px = 40px.
P { font-size: 16px; The line - height: 2.5 em. }Copy the codeRunning effect
An exception occurs when EM is specified in the value of the font-size attribute itself, in which case it refers to the font size of the parent element.
Therefore, when we specify a font size with em, 1em inherits from font-size. Font-size: 1.2em; Makes the text 1.2 times larger than the parent element’s text.
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, < span style =" text-Scale "href=" CSS /fy.css" /> </head> <body> <meta http-equiv="Content-Type" content="text/html; Word-wrap: break-word! Important; "> < span style> Body {font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; } p {font-size: 1.6em; } p:firt-letter { font-size: 3em; font-weight: bold; } </style> <body style="text-align: center; background-color: aquamarine;" > <div>ddad</div> <p> Hellow world</p> </body> </html>Copy the code
Code parsing: The default font size in the browser is 16px. Our first step is to reduce the size of the entire document by setting the text-size to 62.5% for the body, which resets the font size to 10px (62.5% of 16px).
This is the default box-sizing to facilitate the px to EM conversion.
2. Use ex units
The ex unit is equal to the x height of the current font.
The height of x is called because it is usually equal to the height of lowercase x, as shown below. However, ex is defined even for fonts that do not contain x.
P { font-size: 16ex; The line - height: 2.5 em. }Copy the code
Unit of absolute length
Absolute units of length are fixed with respect to each other. They are highly dependent on the output medium and are therefore primarily useful when the output environment is known. The absolute units are physical units (in, cm, mm, PT, PC) and px units. The attributes are described in detail in table J.
unit
describe
in
Inch – one inch equals 2.54 centimeters.
cm
Cm.
mm
Mm.
pt
Points – In CSS, a point is defined as 1⁄72 inches (0.353mm).
pc
Picas minus 1pc is equal to 12pt.
px
Pixel unit -1px equals 0.75pt.
Absolute physical units such as in, CM, mm, etc. shall be used for printing media and similar high resolution devices. However, for screen displays such as desktops and low resolution devices, pixels or EM units are recommended.
Ex. :
H1 {margin: 0.5 in; } /* inches */ h2 { line-height: 3cm; } /* centimeters */ h3 { word-spacing: 4mm; } /* millimeters */ h4 { font-size: 12pt; } /* points */ h5 { font-size: 1pc; } /* picas */ h6 { font-size: 12px; } /* picas */Copy the codeTip: Stylesheets that use relative units, such as EM or percentage %, can be more easily extended from one output environment to another.
Four,
This paper mainly introduces the application of CSS units, through two aspects, the unit of relative length, the unit of absolute length, the points that need to be paid attention to in the project, the matters that need to be paid attention to, are explained in detail and the corresponding solutions are provided. The code is very simple, hope can help you learn.
If there are any problems in the operation process, remember to leave a message below, we will see the first time to solve the problem.