CSS长度单位px % vh vw vmin vmax rem em ex ch对比
随着web的发展，网页需求的增加，网页设计师对网页设计的要求越来越高，迎来了html5与css3的出现，那么css3中有哪些长度计量单位呢，常见的有px % vh vw vmin vmax rem em ex ch，那么他们有什么不同呢，今天我们来分析一下：
一、px和%及pt
像素与百分比是我们最熟悉的一种css计量单位，px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
pt全称为point，但中文不叫“点”，它大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。
百分比%是相对于父元素的计量单位，三者的示例代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<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>
二、em和rem
em
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<style>
body {
font-size: 14px;
}
h1 {
font-size: 16px;
}
.size1 p {
font-size: 1em;
}
.size2 p {
font-size: 2em;
}
.size3 p {
font-size: 3em;
}
</style>
</head>
<body>
<h1>假定当前默认字体尺寸是14px，n em即为14px字体尺寸的n倍：</h1>
<ul>
<li class="size1">
<strong>1em</strong>:
<p>
1em大小的文字
</p>
</li>
<li class="size2">
<...点击查看剩余70%
{{collectdata}}
网友评论0