CSS3基础教程(十七)

CSS3有两种长度单位：相对长度和绝对长度。

1.相对长度

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

|单位|描述| |-|-|-| |em|它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm| |rem|根元素（html）的 font-size| |ch|以节点所使用字体中的“0”字符为基准。|

2.绝对长度

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

|单位|描述| |-|-|-| |cm|厘米| |mm|毫米| |px|像素，像素 (1px = 1/96th of 1in)| |pt|point，大约1/72寸,在打印样式表和物理媒介中，point是最有意义的，当然你也可以用在屏幕媒介上使用，或者其他的地方.| |pc|pica，大约6pt，1/6英寸； (1pc = 12 pt)|

px/pt/em/percent之间的换算表.

实例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            font-size: 16px;
        }
        #box2{
            font-size:12pt; /*12pt=16px*/
        }
        #box3{
            font-size:1pc; /*1pc=12pt*/
        }
        #box4{
            font-size:1em; /*1em=16px*/
        }
        #box5{
            font-size:100%; /*16px=100%*/
        }
    </style>
</head>
<body>
<div id="box1">HTML5教程</div>
<div id="box2">HTML5教程</div>
<div id="box3">HTML5教程</div>
<div id="box4">HTML5教程</div>
<div id="box5">HTML5教程</div>
</body>
</html>

运行效果：