| 单位 | 描述 |
|---|---|
| % | 百分比 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| em | 1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 |
| ex | 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) |
| pt | 磅 (1 pt 等于 1/72 英寸) |
| pc | 12 点活字 (1 pc 等于 12 点) |
| px | 像素 (计算机屏幕上的一个点)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 |
em单位。这个单位用得比较多，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
<!DOCTYPE html>
<html>
<head>
<title>尺寸</title>
<style type="text/css">
div {
background:#e8e8e8;
font-size:20px;
border:1px solid red;
}
.div1 {
height:1em;/*元素高20px,相当于我自己设置的字体尺寸大小*/
/*如果不使用设置的font-size:20px;那么使用的谷歌浏览器默认是16px，则在这里div1则是16px*/
}
.div2 {
height:2em;/*元素高40px，相当于设置的字体尺寸的2倍*/
}
.div3 {
height:3em;/*元素高60px，相当于设置的字体尺寸的3倍*/
}
</style>
</head>
<body>
<div class="div1">div</div>
<br /><br />
<div class="div2">div</div>
<br /><br />
<div class="div3">div</div>
</body>
</html>ex单位。 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
<!DOCTYPE html>
<html>
<head>
<title>尺寸</title>
<style type="text/css">
div {
background:#e8e8e8;
font-size:20px;
border:1px solid red;
}
.div1 {
height:1ex;/*div元素的高度为10.8px，接近与字体大小的一半*/
}
.div2 {
height:2ex;/*div元素的高度为21.6px，比设置的字体大1.8px*/
}
.div3 {
height:10ex;/*div元素的高度为108px*/
}
</style>
</head>
<body>
<div class="div1">div</div>
<br /><br />
<div class="div2">div</div>
<br /><br />
<div class="div3">div</div>
</body>
</html>
