This is the 21st day of my participation in the August Text Challenge.More challenges in August

Hello everyone, I am a bowl of zhou, not you think of the “bowl of porridge”, is a front-end do not want to be drunk 👨🏻💻, if I write an article lucky can get your favor, very lucky ~

This is the 19th article in the Series: Classification and Usage of CSS units

This series of articles in the nuggets first, preparation is not easy to reprint please obtain permission

Writing in the front

This article will look at selectors in CSS. What can you learn from this article? The diagram below:

Values and units

What are CSS values

We’ve learned how to use the color representation in CSS, which is a value. In the color section, we learned about three types of color values. The following example code shows one of the three ways to describe a color value:

p {  
  background-color: #FFCC33;  
 }
Copy the code

Values in CSS are a way of defining the set of allowed subvalues. For example, we can now describe color values using different types of color keyword, RGB color mode, or HSL color mode.

In the CSS, color values need different types of description, and length values need different types of description, such as 10px or 50%.

What are the units of CSS

When using different types to describe length values, additional units are required. Different units mean different things. For example, 100 centimeters equals 1 meter. There are two different types of length units in the CSS:

  • A unit of absolute length that does not vary with the size of other elements.

  • Unit of relative length: A relative value determined by the dimensions of other elements without a fixed measure.

The main thing to understand here is the difference between these two different types of length units in order to understand the size that governs the actual rendering of HTML elements.

Absolute unit of length

The absolute unit of length is generally independent of any other factor. It can be understood simply that this length is fixed and invariable under all circumstances.

Common units of absolute length are as follows:

unit The name of the
cm cm
mm mm
q A quarter of a millimeter
in inches
pc Twelve point type
pt point
px pixel

Of the above units, only px units are commonly used. The rest are rarely used and are generally used for printing.

Unit of relative length

Relative length units usually have an explicit reference object, such as the parent element, root element, or viewport size. The advantage of using relative units is that, with some careful planning, you can size text or other elements to match the rest of the content on the page, making them more suitable for screen output on today’s increasingly complex terminal devices.

Common units of relative length are as follows:

unit Relative to the describe
% The parent element The percentage
em infont-sizeIs the font size relative to the parent element If the parent elementfont-sizeis20px, then2emis40 px, emAccurate to the last three decimal places
ex characterxThe height of the exRefers to small letters in the current font environmentxThe height of the
ch digital0The width of the chRefers to the number in the current font environment0The width of the
rem The font size of the root element If the root element font size is small20pxthen2remis40px
vh Window-height1% vhEqual to the height of the window1/100For example, if the height of the browser is900px.1vhThe value is zero9px
vw Window-width1% vwIn the same way
vmin Windows smaller size1% The smaller of the width and height of the viewport is100vmin
vmax View large size1% The larger width and height of the viewport is100vmax

Pixel values px

The pixel value is the smallest unit in the image. At present, almost all digital devices have the concept of resolution, resolution here refers to more image resolution. This image resolution refers to the amount of information stored in an image, which is typically measured in pixels per inch.

This also explains why, on a screen, the higher the resolution, the smaller the font. Because with a constant screen size, the higher the resolution, the more pixels per inch, the smaller the size of a single pixel. Fonts on the screen are usually set by pixels, such as 18px.

% %

Percentage (%) always takes a value as a reference and sets it as a percentage of that reference value, such as 50%. In CSS, percentages (%) usually refer to the parent of the current HTML element. For example, if a parent element has two child elements, one of which is 50% wide and the other 100% wide, then the width of the second child element is twice the width of the first.

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>The percentage</title>
    <style>
        .parent {
            width: 600px;
            height: 200px;
            /* Sets the border */
            border: 1px solid lightcoral;
        }

        #child1 {
            width: 50%;
            height: 100px;
            background-color: limegreen;
        }

        #child2 {
            width: 100%;
            height: 100px;
            background-color: lightslategray;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>

</html>
Copy the code

The code running result is as follows:

Em and rem

Em and REM are relative units. They are usually used on mobile devices, such as mobile phones and tablets. Its specific meanings are as follows:

  • Em: Set relative to the parent element of the current element.

  • Rem: set relative to the root element of the current element (r is root, where the root element is the < HTML > element).

Both of the above units have the following three conditions:

  • Less than 1: shrinks relative to the parent or root element. For example, 0.5em means 0.5 times the parent element, and 0.5REM means 0.5 times the root element.

  • If the value is 1, it is the same size as the parent or root element.

  • Greater than 1: zooms in relative to the parent or root element. For example, 1.5em means 1.5 times the size of the parent element, and 1.5REM means 1.5 times the size of the root element.

Let’s start by setting the font size for the < HTML > element to 16px and the font size for the element to 22px, and write two

tags under . For both

tags, the parent element is the element and the following element is the < HTML > element. The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Em and rem</title>
    <style>
        html {
            font-size: 16px;
        }

        body {
            font-size: 22px;
        }

        #p1 {
            /* 2.5rem = 2.5 * 16px */
            font-size: 2.5 rem;
        }

        #p2 {
            /* 1.5em = 1.5 * 22px */
            font-size: 1.5 em;
        }
    </style>
</head>

<body>
    <p id="p1">This is p for setting rem</p>
    <p id="p2">This is p for setting em</p>
</body>

</html>
Copy the code

The code running result is as follows:

The vh and vw

Vh and VW units that are relative to the current browser viewport. Viewport refers to the viewport area of the browser (excluding address bar, favorites bar, etc.).

  • Vh: view height: indicates the viewport height. 1vh is equal to 1% of the viewport height.

  • Vw: view width, indicating the viewport width. 1vw is equal to 1% of the viewport width.

For example, if our viewport is 1920* 1080,10 vh means 108px and 10vw means 192px. The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>The vh and vw</title>
    <style>
        body {
            /* Clear the browser default style */
            margin: 0;
        }

        div {
            height: 60vh;
            width: 70vw;
            background-color: tomato;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
Copy the code

The code running result is as follows:

I mentioned the concept of browser default styles, which are the styles that come with the browser itself. For example, has a default style with a margin attribute of 8px.

The default style of the Webkit kernel browser can be viewed by clicking me

conclusion

Preview: In the next article we’ll look at handling fonts in HTML and CSS and HTML elements for text