css中的长度

    半路出家,一直以为css的长度单位标识符只有px、%两种,直到今天新买的书才知道,长度单位标识符有绝对长度和相对长度两种:

css中绝对单位:

单位标识符                                                      说明

in                                                                       英寸

cm     厘米

mm   毫米

pt   磅 (1磅=1/72英寸)

pc     pica(1pica等于12磅)


css相对单位:

单位标识符                                                      说明

em 与元素字号挂钩

ex 与元素字体的"x高度"挂钩

rem 与根元素的字号挂钩

px css像素(假定显示设备的分辨率为96dpi)

另一属性的值的百分比


像素的定义是:参考像素是距读者一臂之遥的像素密度为96dpi的设备上一个像素的视角。

个人感觉这定义上看来,css上的像素应该是绝对单位吧,在尝试过程中也是觉得像素是绝对定义。


CSS 中支持多种长度单位,这些单位可以分为**相对长度单位**和**绝对长度单位**两大类。 ### 相对长度单位 相对长度单位的值不是固定的,它依赖于其他元素的属性值或视口的大小。常见的相对单位包括: - **em**:表示当前字体的大写字母“M”的宽度。通常 1em 等于浏览器的默认字体尺寸(一般是 16px),但它的值会根据当前元素的字体大小动态变化。例如,如果一个元素的字体大小设置为 20px,则 1em 就等于 20px [^2]。 - **ex**:表示当前字体的小写字母“x”的高度。通常情况下,1ex 约等于 0.5em [^2]。 - **ch**:表示 "0" 字符的宽度。它通常用于等宽字体,每个字符的宽度相同 [^3]。 - **rem**:与 em 类似,但它是相对于根元素(通常是 `<html>` 元素)的字体大小,而不是当前元素的字体大小。因此,它更稳定,不会因为父元素的字体大小而变化 [^1]。 - **vw** 和 **vh**:分别表示视口宽度和高度的百分比。1vw 等于视口宽度的 1%,1vh 等于视口高度的 1% [^3]。 - **vmin** 和 **vmax**:分别表示视口宽度和高度中较小或较大的值的百分比。例如,1vmin 等于视口宽度和高度中较小值的 1% [^3]。 ### 绝对长度单位 绝对长度单位的值是固定的,不依赖于环境。它们通常用于打印样式表或需要精确控制输出尺寸的场景。常见的绝对单位包括: - **px**(像素):是 CSS 中最常用的单位之一。1px 等于 1/96 英寸 [^3]。尽管它被认为是“绝对”单位,但在屏幕显示中,它的大小可能会受到屏幕分辨率和缩放设置的影响 [^5]。 - **in**(英寸):1in 等于 2.54 厘米 [^3]。它通常用于描述显示器的物理尺寸。 - **cm**(厘米)和 **mm**(毫米):1 厘米等于 10 毫米,1 英寸等于 25.4 毫米 [^4]。 - **pt**(点):1pt 等于 1/72 英寸,常用于印刷行业 [^4]。 - **pc**(派卡):1pc 等于 12pt,6pc 等于 1 英寸 [^4]。 ### 使用场景 - **相对单位**更适合响应式设计,因为它们可以根据视口大小或父元素的设置进行缩放,从而实现更灵活的布局。 - **绝对单位**主要用于需要精确控制输出的场景,例如打印样式表或固定尺寸的图像排版。 ### 示例代码 以下是一些使用不同长度单位的 CSS 示例: ```css /* 使用相对单位 */ .container { font-size: 2rem; /* 相对于根元素的字体大小 */ padding: 2em; /* 相对于当前元素的字体大小 */ } /* 使用绝对单位 */ .print-only { width: 8.5in; /* 8.5 英寸,适用于打印 */ margin: 1cm; /* 1 厘米 */ } /* 视口相关的单位 */ .fullscreen { height: 100vh; /* 100% 视口高度 */ width: 100vw; /* 100% 视口宽度 */ } ``` 这些单位的选择取决于设计需求和目标设备的特性。在现代网页设计中,`px`、`em`、`rem` 和 `vw/vh` 是最常用的单位,因为它们提供了良好的灵活性和兼容性 [^5]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值