CSS中使用的长度单位

以下内容引自:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1203/2397.html


绝对长度单位

英寸(in)--inch
厘米(cm)--centimeter
毫米(mm)--millimeter
磅(point)记作pt
字高(pc)--pica

磅(pt)和字高(pc)常用于印刷单位,1pc=12pt;1in=72pc。这是搞品质打印机
常用的Adobe postscript语言采用的定义

CSS还支持像素(pixels)表示的“绝对”长度。但由于像素密度和用户对显示器分辨率选择的不同
,像素的绝对大小在不同显示器上有很大的差异。所以当打印网络文档时,像素单位会
带来问题。
英寸和厘米等绝对长度单位在打印排版时非常有用,但在电子文档显示中,因为6*4inches和
21inches对角显示屏的显示不同,不能保证在给定的显示屏浏览器能用固定的窗口区域
显示文档。
这样,我们就需要能随显示区域大小或文本字体大小而自动调整的单位——相对长度单位

相对长度单位

em——根据实际字体的磅值定义长度:eg,字体大小为12pt,则1.5em=18pt;html中的<em>标签标示强调内容
ex——根据字体的x高度定义长度:即相对于当前字体中字母“x”的高度,而“x”的高度随字体族
不同而不同,所以一个单位ex的大小既取决于字体的大小,又取决于字体族的大小;
百分比(percentage)——它把长度定义为相关长度的百分比值,相关长度既可以是父单元字体大小
又可以是父类格式单元的宽度。 注意:现在的浏览器并不是相对于单元宽度计算百分比值,因而
不能正确实现百分比长度。相反,所有浏览器都把和字体无关的百分比长度计算为整个浏览器窗口宽度
的百分比值。

em单位比ex单位更可靠,不同浏览器间,em的兼容性最好,但他们都会导致打印问题
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、付费专栏及课程。

余额充值