{site_name}

{site_name}

🌜 搜索

CSS 单位是用于描述网页元素大小、位置和其他属性的一种度量标准

前端 𝄐 0
css中的单位,css单位rem,css vh单位,css计量单位,css 字体单位,css的vw单位
CSS 单位是用于描述网页元素大小、位置和其他属性的一种度量标准。CSS 单位分为绝对单位和相对单位两类。

1. 绝对单位

绝对单位是固定的,无论屏幕尺寸如何都不会改变。常见的绝对单位包括:

- 像素(px):像素是最常用的单位之一,表示精确的长度或宽度。1px 等于屏幕上的一个物理像素点。
- 英寸(in):1 英寸等于 2.54 厘米。
- 毫米(mm):1 毫米等于屏幕上的 1/25.4 英寸。
- 点(pt):1 点等于 1/72 英寸。

例子:


/* 使用像素作为边框宽度 */
div {
border: 1px solid black;
}

/* 使用英寸作为文本字号 */
p {
font-size: 0.5in;
}


2. 相对单位

相对单位是相对于其他值来计算的,因此可以根据屏幕或视口的大小进行调整。常见的相对单位包括:

- 百分比(%):基于父元素的大小。
- em:相对于当前元素的字体大小来计算。
- rem:相对于根元素的字体大小来计算。
- vw/vh:相对于视口的宽度或高度来计算。

例子:


/* 设置 div 宽度为父元素宽度的 50% */
div {
width: 50%;
}

/* 设置段落文本字号为当前字体大小的 1.5 倍 */
p {
font-size: 1.5em;
}

/* 设置根元素字体大小为 16 像素,然后设置段落字体大小为根元素字体大小的 1.2 倍 */
html {
font-size: 16px;
}
p {
font-size: 1.2rem;
}

/* 设置一个宽度为视口宽度的 50% 的 div 元素 */
div {
width: 50vw;
}