css计量单位_CSS中的度量单位-CSDN博客

css计量单位

CSS | 测量单位 (CSS | Measurement Units)

The distance measurement in CSS is a number immediately followed by a length unit. CSS supports several length measurement units. They are,

CSS中的距离测量是一个数字，紧跟一个长度单位。 CSS支持多个长度测量单位。他们是，

Absolute length
绝对长度
Relative length
相对长度

1)绝对长度 (1) Absolute length)

The absolute length units are fixed and cannot be changed.

绝对长度单位是固定的，不能更改。

It is not preferable to use absolute length for use on-screen as the screen may vary depending on the device used for that page. It is recommended to use it where the output medium is known.

在屏幕上使用绝对长度是不可取的，因为屏幕可能会根据用于该页面的设备而有所不同。建议在已知输出介质的地方使用它。

Absolute length units,

绝对长度单位，

1) cm (centimeter)

1)厘米(厘米)

It is used to define the length in terms of cm.

它用于定义以厘米为单位的长度。

Syntax:

句法：

Element {
    font-size: 15cm;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            font-size: 2cm;
        }
    </style>
</head>

<body>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, cm unit length is used.

在以上示例中，使用了厘米单位长度。

2) mm (millimeter)

2)毫米(毫米)

It is used to define the length in terms of mm.

用于定义以毫米为单位的长度。

Syntax:

句法：

Element {
    font-size: 10mm;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            font-size: 6mm;
        }
    </style>
</head>

<body>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, mm unit length is used.

在以上示例中，使用的单位长度为mm 。

3) in (inches)

3)英寸(英寸)

It is used to define the size of element in terms of inches.

它用于以英寸为单位定义元素的大小。

Note: 1in = 96px = 2.54cm

注意：1英寸= 96像素= 2.54厘米

Syntax:

句法：

Element {
    font-size: 3in;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            font-size: 0.5in;
        }
    </style>
</head>

<body>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, in unit length is used.

在以上示例中，使用了单位长度。

4) px (pixels)

4)px(像素)

It is used to define the length in terms of pixels.

它用于定义以像素为单位的长度。

Note: 1px = 1/96^th of 1in

注：1px的= 1/96 ^个 1英寸的

Syntax:

句法：

Element {
    font-size: 10px;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            font-size: 44px;
        }
    </style>
</head>

<body>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, px unit length is used.

在上面的示例中，使用了px单位长度。

5) pt (points)

5)点(点)

It is used to define the length in terms of points.

它用于以点为单位定义长度。

Note: 1pt = 1/72 of 1in

注意： 1pt = 1in的1/72

Syntax:

句法：

Element {
    font-size: 10pt;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            font-size: 66pt;
        }
    </style>
</head>

<body>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, pt unit length is used.

在上面的示例中，使用了pt单位长度。

6) pc (picas)

6)pc(picas)

It is used to define the length in terms of picas.

它用于定义以云母为单位的长度。

Note: 1pc = 12 pt

注意： 1pc = 12 pt

Syntax:

句法：

Element {
    font-size: 3pc;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            font-size: 4pc;
        }
    </style>
</head>

<body>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, pc unit length is used.

在上面的示例中，使用了pc单位长度。

2)相对长度 (2) Relative length)

Relative unit length is good for use on-screen as if screen size varies depending on the device then these relative length units also change with the different rendering mediums.

相对单位长度很适合在屏幕上使用，因为屏幕大小取决于设备而有所不同，然后这些相对长度单位也会随不同的渲染媒体而变化。

Relative unit lengths,

相对单位长度

1) em

1)em

It is relative to the font size of that element. (n em means n times the size of the current font)

它相对于该元素的字体大小。 ( n em表示当前字体大小的n倍)

Syntax:

句法：

Element {
    font-size: 2em;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            font-size: 6em;
        }
    </style>
</head>

<body>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, em unit length is used.

在以上示例中，使用了em单位长度。

2) % (percentage)

2)％(百分比)

It is relative to the parent element.

它相对于父元素。

Syntax:

句法：

Element {
    font-size: 40%;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        h1 {
            font-size: 300%;
        }
        
        p {
            font-size: 150%;
        }
    </style>
</head>

<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, % unit length is used.

在上面的示例中，使用了％单位长度。

3) vmax

3)vmax

It is relative to 1% of the viewport's larger dimension.

它是相对于视口较大尺寸的1％。

Syntax:

句法：

Element {
    font-size: 20vmax;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        h1 {
            font-size: 10vmax;
        }
        
        p {
            font-size: 3vmax;
        }
    </style>
</head>

<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, vmax unit length is used.

在上面的示例中，使用了vmax单位长度。

4) vmin

4)vmin

It is relative to 1% of the viewport's smaller dimension.

相对于视口较小尺寸的1％。

Syntax:

句法：

Element {
    font-size: 10vmin;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        h1 {
            font-size: 10vmin;
        }
        
        p {
            font-size: 3vmin;
        }
    </style>
</head>

<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, vmin unit length is used.

在上面的示例中，使用了vmin单位长度。

5) vh

5)vh

It is relative to 1% of the height of the viewport.

相对于视口高度的1％。

Syntax:

句法：

Element {
    font-size: 10vh;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        h1 {
            font-size: 10vh;
        }
        
        p {
            font-size: 3vh;
        }
    </style>
</head>

<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, vh unit length is used.

在以上示例中，使用了vh单位长度。

6) vw

6)大众

It is relative to 1% of the width of the viewport.

相对于视口宽度的1％。

Syntax:

句法：

Element {
    font-size: 10vw;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        h1 {
            font-size: 10vw;
        }
        
        p {
            font-size: 3vw;
        }
    </style>
</head>

<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, vw unit length is used.

在上面的示例中，使用了vw单位长度。

7) rem

7)雷姆

It is relative to the browser base font-size.

它相对于浏览器基本字体大小。

Syntax:

句法：

Element {
    font-size: 10rem;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        h1 {
            font-size: 10rem;
        }
        
        p {
            font-size: 3rem;
        }
    </style>
</head>

<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, rem unit length is used.

在上面的示例中，使用了rem单位长度。

8) ex

8)前

It is relative to the X (axis)-height of the current font.

相对于当前字体的X(轴)高度。

Syntax:

句法：

Element {
    font-size: 6ex;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        h1 {
            font-size: 10ex;
        }
        
        p {
            font-size: 3ex;
        }
    </style>
</head>

<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量

In the above example, ex unit length is used.

在上面的例子中，使用前部的长度。

9) ch

It is relative to the width of the 0.

相对于0的宽度。

Syntax:

句法：

Element {
    font-size: 2ch;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        h1 {
            font-size: 10ch;
        }
        
        p {
            font-size: 3ch;
        }
    </style>
</head>

<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph</p>
</body>

</html>

Output

输出量