Shulou(Shulou.com)06/02 Report--

Today, the editor will share with you the relevant knowledge points of the css unit, which are detailed in content and clear in logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

When it comes to CSS units, we are probably most familiar with pixel units (px), which is an absolute unit, that is, a 10px text is the same size wherever it is placed. Units can affect a series of attributes such as color, distance, size, and so on. There are many forms of units in CSS. Let's take a look at each of these units.

1. Relative unit

A relative unit is the length relative to another length. The relative units in CSS are divided into two main categories:

Fonts relative to units, they are calculated according to font-size. Common font relative units are: em, rem, ex, ch

The relative units of the window are determined by the size of the window. The common relative units of windows are vw, vh, vmax and vmin.

Let's take a look at these common CSS units.

(1) em and rem

The em is the most common unit of relative length and is suitable for typesetting based on a specific font size. According to CSS, 1em is equal to the value of the font-size attribute of an element.

The em is calculated relative to the font size of the parent element. If the font size of inline text is not currently set, it is relative to the default font size of the browser. When the nesting of DOM elements deepens, and the unit that explicitly sets the value of font-size to many levels at the same time is em, then layer by layer calculation is required and the complexity will be very high.

Of course, the above statement is not rigorous. Let's look at an example:

Document .parent {width: 300px; height: 300px; font-size: 20px;} .child {border: 1em solid;} child element

Here, the font size of the parent element is set to 20px, and then the border width of the child element is set to 1em. In this case, the border value of the child element is 20px, which is indeed set relative to the font size of the parent element:

So if we set the font of the child element to 30px:

.child {font-size: 30px; border: 1em solid;}

You can see that the border width of the child element is 30px, which is calculated relative to its own size:

Therefore, it can be concluded that if the font size of its own element is not set, it will be calculated according to the font size of its parent element, and if the element itself has already set a font, then it is calculated based on its own font size.

Em units can be applied not only to font-size, but also to other attributes that use length, such as border-width, width, height, margin, padding, text-shadow, and so on.

Therefore, the use of em is rather complex, and it may inherit the font size of any level of parent element. It needs to be used with caution.

Rem is much simpler than em and is calculated based on the font size of the root element (root element) of the page. To modify the above example:

.child {font-size: 30px; border: 1rem solid;} html {font-size: 25px;}

The effect is as follows, as you can see, the length of the border becomes 25px, which is calculated based on the font size of the root element html:

If you don't set the font size on the root element, font-size: 1rem works the same as font-size: initial.

Using em and rem gives us the flexibility to zoom in and out of the element as a whole, rather than a fixed size. So when should I use em and when should I use rem? You can choose according to the difference between the two:

Both styles calculated in the client will be displayed in the form of px

Rem is the font-size calculation relative to the root element html, and em is the font-size calculation relative to the element

When you need to zoom according to the browser's font-size settings, you should use rem

The use of em should be based on the font-size of the component, not the font-size of the root element

Rem can inherit font-size values from browser font settings, and em may be affected by any inherited parent element font-size.

(2) ex and ch

Ex and ch are both typesetting units, and their size depends on the font-size and font-family attributes of the element.

Ex refers to the height of the lowercase letter x in the font used. Therefore, if the two fonts are different, then the value of ex is not the same. Because the height of the lowercase x of each font is different.

Ch is similar to ex, but it is calculated based on the width of the number 0. Will change as the font changes. The width of 0 is usually the average character width of the font, which is an estimate. Because ch is an approximately equal-width unit, it is useful when setting the width of a container, such as when a container wants to display a specified number of strings.

(3) vw, vh, vmax and vmin

These four units are all window units. The so-called window refers to the visual area on the web side, and the window on the mobile side refers to the layout window. If the size of the window changes, these values will change accordingly. These four units refer to:

Vw: percentage of window width

Vh: percentage of window height

Vmax: larger vh and vw

Vmin: smaller vh and vw.

If the height of a browser is 800px, the value of 1vh is 8px. The size of vh and vw is always related to the height and width of the window.

Vmin and vmax are related to the maximum and minimum values of window width and height. If a browser is 500px in height and 1200px in width, then 1vmin is 5pxMagol and 1vmax is 12px.

These units are all units of length, so they can be used wherever units of length are allowed. These units are more suitable for creating a full view interface, such as the interface of a mobile device, because the elements vary according to the size of the view and have nothing to do with any element in the document tree.

two。 Absolute unit

In CSS, absolute units include: px, pt, pc, cm, mm, in, etc. The absolute unit is a fixed value that reflects a real physical size. It is not affected by screen size or font. Their size depends on the value and the resolution of the screen (DPI, dots per inch). Px is one of the most commonly used absolute units. The conversion relations of these absolute units are as follows:

1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px

(1) px

Px, whose full name is Pixels, stands for pixels, and it is not strictly equal to the pixels of the display, especially under the high-definition screen. Although CSS units are scaled appropriately according to the browser, operating system, or hardware, and can change depending on the resolution settings of some devices or users, 96px is usually equal to the size of a physical inch.

CSS defines how raster images, such as photos, are displayed so that the default size of each image is 1px. A photo with "600x400" resolution has a length and width of "600px" and "400px", respectively, so the pixels of the photo itself are not the same as those of the display device, but the same as the px units. In this way, the image can be arranged completely with other elements of the web page.

In many cases, px is also often called CSS pixel. It is an absolute unit, but it can also be regarded as a relative unit because the pixel unit is relative to the device pixel. On the same device, the physical pixel represented by each CSS pixel can be changed; between different devices, the physical pixel represented by each CSS pixel can be changed.

.box {width: 100px; height: 100px;}

(2) pt

The full name of pt is Point, which means point. Often used in software design and typesetting printing industry (the author to do the front-end system, the final product is a need to print the PDF, so this unit will be often used). When using this unit, the result printed on paper is the same regardless of the resolution of the monitor.

If only for the display of web pages, it is recommended to use px pixel units, if you need to output printing products, you can consider using pt.

(3) pc

The whole process of pc is Picas, which means Paika. It is equivalent to the size of the new No. 4 lead character in our country. Pica is also a printing term. One pica equals 12:00. The conversion relationship between it and px is as follows:

1pc = 16px

(4) cm

The full name of cm is Centimeters, meaning centimeters. The conversion relationship between it and px is as follows:

1cm = 37.8px

(5) mm

The full name of mm is Millimeters, which means mm. The conversion relationship between it and px is as follows:

1mm = 3.78px

(6) in

The full name of in is Inches, which means inches. The conversion relationship between it and px is as follows:

1in = 96px

3. Frequency unit

There are two frequency units in CSS: Hz and kHz. Their conversion relationships are as follows:

1kHz = 1000Hz

Typically, frequency units are used in listening or speaking cascading style sheets. Frequency can be used to change the tone of a voice reading text. Low frequency is bass, high frequency is treble.

.low {pitch: 105Hz;} .squares {pitch: 135Hz;}

It should be noted that when the value is 0, the unit has no effect on the value, but the unit cannot be omitted. In other words, 0, 0Hz, and 0kHz are different. Therefore, when using frequency units, do not write 0 directly. In addition, these two units are not case-sensitive.

4. Time unit

There are two units of time in CSS: seconds (s) and milliseconds (ms). Both of these time units are new to CSS. The conversion relationship between these two units is as follows:

1s = 1000ms

Time units are mainly used in transitions and animations to define duration or delay time. The following two definitions are equivalent:

A [href] {transition-duration: 2.5s;} a [href] {transition-duration: 2500s;}

5. Resolution unit

There are three resolution units in CSS: dpi, dpcm, and dppx. These three units are all new units in CSS3 China. They are all positive and negative values are not allowed. The conversion relationship of these three units is as follows:

1dppx = 96dpi1dpi ≈ 0.39dpcm1dpcm ≈ 2.54dpi

Resolution units are mainly used for operations such as media queries.

(1) dpi

The full name of dpi is dots per inch, which represents the number of points per inch. A normal screen usually contains 72 or 96 dots, and a screen larger than 192dpi is called a high-resolution screen.

@ media screen and (min-resolution: 96dpi) {.} @ media print and (min-resolution: 300dpi) {.}

(2) dpcm

The full name of dpcm is dots per centimeter, which represents the number of points per centimeter.

@ media screen and (min-resolution: 28dpcm) {.} @ media print and (min-resolution: 118dpcm) {.}

(3) dppx

The full name of dppx is dots per pixel, which means the number of points per px. Because the fixed ratio of CSS px is 1:96, 1dppx is equivalent to 96dpi. It corresponds to the default resolution of the image displayed in the CSS defined by the image resolution.

@ media screen and (min-resolution: 2dppx) {.} @ media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) {.}

6. Angular unit

There are four angular units in CSS: deg, grad, rad, and turn. These angular units are new units in CSS3. Their conversion relationships are as follows:

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

Generally, these angular units are used for * * rotation operations of elements, including 2D rotation, 3D rotation, and so on.

When the rotation value is positive, the element rotates clockwise

When the rotation value is negative, the element rotates counterclockwise.

Usually, a complete rotation is 360 degrees. So, all the angles are between 0 and 360 degrees. However, values beyond this range are also allowed, except that they all fall between 0 and 360 degrees. For example, rotating 420 degrees clockwise (450deg), 270degrees counterclockwise (- 270deg), and rotating 90 degrees clockwise (90deg) all have the same effect and will be classified as 90deg. But when using animation, these angle values are very important.

The rotation of CSS mainly depends on the methods such as rotate (), rotate3d, skew () in the transform property. Just pass them the angle of rotation.

In addition to rotation using angles, linear gradients often use angle values:

Background: linear-gradient (45deg, # 000, # fff)

(1) deg

The full name of deg is Degress, which means degrees. A circle has a total of 360degrees.

Transform: rotate (2deg)

(2) grad

The full name of grad is Gradians, which means gradient. A circle has a total of 400 gradients.

Transform: rotate (2grad)

(4) rad

The full name of rad is Radians, which means radians. A circle has a total of 2 π radians.

Transform: rotate (2rad)

(4) turn

The full name of turn is Turns, which means circle (turn). A circle has a total of one circle (turn).

Transform:rotate (.5turn)

7. Percentage unit

Percentage (%) is also one of our more commonly used units, and all attributes that accept length values can use percentage units. However, the effect of using this unit may not be the same for different attributes. But all need to have a reference value, that is, the percentage value is a relative value.

Let's take a look at the use of percentage units in common scenarios.

(1) percentage in the box model

The box model in CSS contains attributes such as width, max-width, min-width, height, max-height, min-height, padding, margin, and so on. When using percentages, the references for these properties are not the same:

Width, max-width, min-width: when the value is percentage, it is calculated relative to the width containing the block

Height, max-height, min-height: when the value is percentage, it is calculated relative to the height containing the block

Padding, margin: if the value is percentage, it is calculated relative to the width that contains the block if the value is horizontal; if it is vertical, it is calculated relative to the height that contains the block.

(2) percentage in text

The attributes controlled by text in CSS are font-size, line-height, vertical-align, text-indent and so on. When using percentages, the references for these properties are not the same:

Font-size: calculated based on the font-size of the parent element

Line-height: calculate according to font-size

Vertical-align: calculate according to line-height

Text-indent: if it is horizontal, it is calculated according to width, if it is vertical, it is calculated according to height.

(3) percentage in positioning

In CSS, percentage can be used as a unit for top, right, bottom, and left that control the location of the position. The reference is width and height that contain blocks in the same direction. The inclusion blocks vary from location to location:

If the element is static (static) or relative positioning (relative), the containing block is generally its parent container

If the element is absolute, the containing block should be the ancestor element whose nearest position is absolute, relative, or fixed

If the element is fixed positioning (fixed), the containing block is the viewport.

(4) percentage in transformation

The translate and transform-origin values in the transform property in CSS can also set percentages.

TranslateX () is calculated according to the width of the container

TranslateY () is calculated according to the height of the container

Width calculation of Abscissa (x) relative to container in transform-origin; height calculation of ordinate (y) relative to container

Notice that there is also a function translateZ () on the z-axis in translate. It is a value that does not accept percentages

These are all the contents of this article entitled "what are the units of css?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.