What are the units for setting length in css?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What are the units for setting length in css?

青灯夜游

Sep 21, 2022 pm 05:02 PM

css

css length units are: 1. em, relative font length unit, its unit length is determined based on the vertical length of the text of the element; 2. rem, relative font length unit, only relative to the root element, that is html element font size to determine its length; 3. %, relative to the parent element width or font size as a percentage; 4. px, pixels, relative to the monitor screen resolution; 5. vw, relative to the browser window The width; 6. vh, relative to the height of the browser window; 7. ch, relative to the height of the number 0 in the font used.

What are the units for setting length in css?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS style consists of three parts: selector, attribute and value (for example, p{width: 100px;}). When setting certain attribute values, the unit corresponding to the value may be involved. CSS supports a variety of different length units, which can be divided into two categories according to type: absolute length units (such as inches, centimeters, points) and relative length units (such as percentages).

1. Relative length unit

The relative length unit means that this unit does not have a fixed value, and its value is affected by the attributes of other elements. (such as the size of the browser window, the size of the parent element), relative length units are very suitable for responsive layout.

The following table lists the relative length units supported in CSS:

Unit	Description	Example
em	Relative font length unit, its unit length is determined based on the vertical length of the element's text. Relative to the value of its own font-size (font size) attribute, if it is not set, it inherits the value of the font-size attribute of the parent element. 1em is equivalent to the value of the font-size attribute, such as font-size. The value is 16px, then 1em is equal to 16px, and 2em is equal to 32px	p{line-height:2em;}
rem	Relative font length unit, the length is determined only relative to the font size of the root element, that is, the html element. Relative to the size of the font-size attribute of the root element For example, if the font-size of the root element is 100px, then 1.2rem is equivalent to 120px	p{font-size: 1.2rem;}
ex	Relative to the height of the lowercase English letter x in the font used, if the height of x cannot be determined The height is calculated using 0.5em	p{font-size: 1ex;}
ch	relative to the height of the number 0 in the font used, If the height of 0 cannot be determined, use 0.5em to calculate	p{line-height: 3ch}
vw	relative to the browser window Width, 1vw = 1% of the window width	p{font-size: 5vw;}
vh	relative to the height of the browser window , 1vh = 1% of the window height	p{font-size: 5vh;}
vmin	The smaller value between vw and vh	p{font-size: 5vmin;}
vmax	The larger value between vw and vh	p{ font-size: 5vmax;}
%	Percent relative to the width or font size of the parent element	div{width: 55%}

[Example] The following uses a comprehensive example to demonstrate the use of relative length units:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS中的单位</title>
        <style>
            .box{
                width: 60vw;
                height: 88vh;
                border: 1ex solid black;
                font-size: 16px;
            }
            .info{
                font-size: 2em;
            }
            .ex > span{
                font-size: 3ex;
            }
            .ch > span{
                font-size: 4ch;
            }
        </style>
    </head> 
    <body>
        <div class="box">
            这是 16px 的字体
            <p class="info">这是 2em 的字体</p>
            <p class="ex">
                x：<span>这是 3ex 的字体</span>
            </p>
            <p class="ch">
                0：<span>这是 4ch 的字体</span>
            </p>
        </div>  
    </body>
</html>

The running results are as shown below:

What are the units for setting length in css?

2. Absolute length unit

The absolute length unit represents a real physical size. Its size is fixed and does not Will change due to changes in the size of other elements. The following table lists the absolute length units supported in CSS:

##pxp{font-size: 16px;}ptpoint, is a special printing unit "Point", also known as "point" (1pt = 1/72in) p{font-size: 16pt;}pcpica, which can be called "pica" in Chinese, is a unit used in the printing industry to describe font size, which is equivalent to the size of my country's new No. 4 type (1pc = 12pt) p{font-size: 5pc ;}

Unit	Description	Example
cm	CM	p{font-size: 0.5cm;}
mm	MM	p{font-size: 5mm;}
in	Inches (1in = 96px = 2.54cm)	p{ font-size: 1in;}
	pixels are relative to the monitor screen resolution (1px = 1/96in)

#[Example] The following uses a comprehensive example to demonstrate the use of absolute length units:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS中的单位</title>
        <style>
            .box{
                width: 4in;
                height: 4.5cm;
                border: 2mm solid black;
                font-size: 16px;
            }
            .pt{
                font-size: 2pt;
            }
            .pc{
                font-size: 3pc;
            }
        </style>
    </head> 
    <body>
        <div class="box">
            这是 16px 的字体
            <p class="pt">这是 2pt 的字体</p>
            <p class="pc">这是 3pc 的字体</p>
        </div>  
    </body>
</html>

The running results are shown in the figure below:

What are the units for setting length in css?

(Learning video sharing:

web front-end)

The above is the detailed content of What are the units for setting length in css?. For more information, please follow other related articles on the PHP Chinese website!

Statement

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