发布需求今天给大家带来了关于CSS的相关教程，主要和大家聊一下CSS中的七个长度单位，如下所示：
1、em，相对字体长度单位，它的单位长度是根据元素的文本文字垂直长度来决定的；
2、rem，相对字体长度单位，只相对根元素即html元素字体大小来确定其长度；
3、%，相对于父元素宽度或字体大小的百分比；
4、px，像素，是相对于显示器屏幕分辨率而言的；
5、vw，相对于浏览器窗口的宽度；
6、vh，相对于浏览器窗口的高度；
7、ch，相对于所用字体中数字0的高度。
适用于windows7系统、CSS3&&HTML5版、Dell G3电脑。
一起聊聊在css中的7个长度单位
CSS样式由选择器、属性和值三个部分组成（例如p{width: 100px;}），在设置某些属性值时可能会涉及到与值对应的单位。CSS 支持多种不同的长度单位，根据类型的不同可以分为两类，分别是绝对长度单位（例如英寸、厘米、点）和相对长度单位（例如百分比）。
相对长度单位
相对长度单位指的是这个单位没有一个固定的值，它的值受到其它元素属性（例如浏览器窗口的大小、父级元素的大小）的影响，在响应式布局方面相对长度单位非常适用。
下表中列举了 CSS 中支持的相对长度单位：
【示例】下面通过一个综合的示例演示相对长度单位的使用：
<!DOCTYPE html>
<html>
<head>
<title>CSS中的单位</title>
<style>
.box{
width: 60vw;
height: 88vh;
border: 1ex solid black;
font-size: 16px;
}
.info{
font-size: 2em;
}
.ex > span{
font-size: 3ex;
}
.ch > span{
font-size: 4ch;
}
</style>
</head>
<body>
<div class="box">
这是 16px 的字体
<p class="info">这是 2em 的字体</p>
<p class="ex">
x：<span>这是 3ex 的字体</span>
</p>
<p class="ch">
0：<span>这是 4ch 的字体</span>
</p>
</div>
</body>
</html>
运行结果如下图所示：
绝对长度单位
绝对长度单位表示一个真实的物理尺寸，它的大小是固定的，不会因为其它元素尺寸的变化而变化。下表中列举了 CSS 中支持的绝对长度单位：
【示例】下面通过一个综合的示例演示绝对长度单位的使用：
<!DOCTYPE html>
<html>
<head>
<title>CSS中的单位</title>
<style>
.box{
width: 4in;
height: 4.5cm;
border: 2mm solid black;
font-size: 16px;
}
.pt{
font-size: 2pt;
}
.pc{
font-size: 3pc;
}
</style>
</head>
<body>
<div class="box">
这是 16px 的字体
<p class="pt">这是 2pt 的字体</p>
<p class="pc">这是 3pc 的字体</p>
</div>
</body>
</html>
运行结果如下图所示：
以上就是关于在css中的7个长度单位之详细解析，翼速应用平台内有更多相关资讯，欢迎查阅！
我来说两句