长度取值 Length Data Types
长度单位
长度取值 | 版本 | 描述 |
---|---|---|
文本相对长度单位 | ||
em | CSS1 | 相对于当前对象内文本的字体尺寸 |
ex | CSS1 | 相对于字符“x”的高度。通常为字体高度的一半 |
ch | CSS3 | 数字“0”的宽度 |
rem | CSS3 | 相对于根元素(即html元素)font-size计算值的倍数 |
视口相对长度单位 | ||
vw | CSS3 | 相对于视口的宽度。视口被均分为100单位的vw |
vh | CSS3 | 相对于视口的高度。视口被均分为100单位的vh |
vmax | CSS3 | 相对于视口的宽度或高度,总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax |
vmin | CSS3 | 相对于视口的宽度或高度,总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin |
绝对长度单位 | ||
cm | CSS1 | 厘米 |
mm | CSS1 | 毫米 |
q | CSS3 | 1/4毫米(quarter-millimeters); 1q = 0.25mm |
in | CSS1 | 英寸(inches); 1in = 2.54cm |
pt | CSS1 | 点(points); 1pt = 1/72in |
pc | CSS1 | 派卡(picas); 1pc = 12pt |
px | CSS1 | 像素(pixels); 1px = 1/96in |
<length>
说明:
<number>
接长度单位
- 特殊值
0
可以省略单位。例如:margin:0px
可以写成margin:0
- 一些属性可能允许有负长度值,或者有一定的范围限制。如果不支持负长度值,那应该变换到能够被支持的最近的一个长度值。
- 长度单位包括包括:相对单位和绝对单位。
- 相对长度单位包括有:
em,ex,ch,rem,vw,vh,vmax,vmin
- 绝对长度单位包括有:
cm,mm,q,in,pt,pc,px
rem
相对长度单位,相对于根元素(即html
元素)font-size
计算值的倍数
实例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
html,
h1 {
font-size: 12px;
}
p {
font-size: 2rem;
}
</style>
</head>
<body>
<h1>下面的文字将是html定义的字体大小的2倍:</h1>
<p>我是html定义的12px的2倍,字体大小为24px</p>
</body>
</html>
效果图:
px
相对长度单位,像素(Pixels)
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
示例代码:
div{font-size:12px;}
p{text-indent:24px;}
实例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1{margin:10px 0;font-size:16px;}
ul{margin:0;padding:0;list-style:none;}
li{margin-top:8px;background:#ccc;}
.in{width:1in;}
.pt{width:72pt;}
.pc{width:6pc;}
.px{width:96px;}
.cm{width:2.54cm;}
.mm{width:25.4mm;}
</style>
</head>
<body>
<h1>单位转换对比:</h1>
<ul>
<li class="in">1in</li>
<li class="pt">72pt</li>
<li class="pc">6pc</li>
<li class="px">96px</li>
<li class="cm">2.54cm</li>
<li class="mm">25.4mm</li>
</ul>
<p>1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px</p>
</body>
</html>
效果图: