css中各种单位总结

最新推荐文章于 2022-03-28 13:02:41 发布

Sophie1797

最新推荐文章于 2022-03-28 13:02:41 发布

阅读量172

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_37981481/article/details/79809742

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

主要参考来源：http://www.runoob.com/cssref/css-units.html

绝对单位：

相对单位：

根据上面的图表写了一段代码测试了一下效果，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css单位</title>
<style>
html{
	font-size: 16px;
}
.absolute-cm{
	font-size: 5cm;
}

.absolute-mm{
	font-size: 5mm;
}

.absolute-in{
	font-size: 5in;
}

.absolute-px{
	font-size: 15px;
} 

.absolute-pt{
	font-size: 15pt;
}

.absolute-pc{
	font-size: 5pc;
}

.relative-em{
	font-size: 0.1em;
}

.relative-ex{
	font-size: 2ex;
}

.relative-ch{
	font-size: 0.1ch;
}

.relative-rem{
	font-size: 2rem;
} 

.relative-vw{
	font-size: 5vw;
}

.relative-vh{
	font-size: 5vh;
}

div{
	width: 300px;
	height: 200px;
	font-size: 64px;
}

</style>
</head>
<body>
<p class="absolute-cm">这是5cm的大小<span class="relative-em">这是0.1*5cm(0.1em)的大小</span></p>
<p class="absolute-mm">这是5mm的大小<span class="relative-rem">这是2*16px(2rem)的大小</span></p>
<p class="absolute-in">这是5in的大小0<span class="relative-ch">这是相对5in中0大小的0.1ch的大小</span></p>
<p class="absolute-px">这是15px的大小<span class="relative-ex">这是相对15px中x大小的2ex大小</span></p>
<p class="absolute-pt">这是15pt的大小<span class="relative-vw">这是5vw的大小</span></p>
<p class="absolute-pc">这是5pc的大小<span class="relative-vh">这是5vh的大小</span></p>
<div><p style="font-size: 50%;">这是font size是64px的div的50%的大小</p></div>
<p style="font-size: 32px;">这是32px的大小</p>
</body>
</html>

代码中对单位的测试并不完全，vmin和vmax并没有包含在其中，在菜鸟教程中有相对应的测试案列，拉伸浏览器的长宽可以看出菜鸟教程的案列中字体大小的变化。

Sophie1797

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中各种单位总结

主要参考来源：http://www.runoob.com/cssref/css-units.html绝对单位：相对单位：根据上面的图表写了一段代码测试了一下效果，代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;css单位&lt;/title&gt;&a
复制链接

扫一扫