CSS之长度单位

CSS之长度单位

很多CSS属性要靠长度度量衡才能正确显示元素。因此，CSS中有许多长度单位。
CSS中的长度单位分为绝对长度单位和相对长度单位。

绝对长度单位

1. 英寸(in) 1 英寸为2.54厘米
2. 厘米(cm)
3. 毫米(mm)
4. 四分之一毫米（q)
5. 像素(px)

主要有以上几种,我们通过程序实例来看看他们不同的效果。

<div id = "test">
		<p>计算机科学与技术专业隶属于工学院</p>
		<ul>
			<li>舒徐</li>
			<li>英语</li>
			<li>计算机</li>
		</ul>
	</div>

1. in

#test 
	{
		width:10in;
		height:200px;
		border:1in solid red;
		background:pink;
		font-size:1.5vw;
	}

1in = 2.54cm
2. cm

#test 
	{
		width:20cm;
		height:200px;
		border:2cm solid red;
		background:pink;
		font-size:1.5vw;
	}

3. mm 基本如上
4. q

#test 
	{
		width:1000q;
		height:200px;
		border:10q solid red;
		background:pink;
		font-size:1.5vw;
	}

相对长度单位

1. em 1em等于元素font-size的属性值。理论上，1em 等于所用字体中小写m的宽度。
2. ex 理论上，1ex 等于所用字体中小写x的***高度***
3. rem 相对于根元素的font-size的大小，始终相对于根元素，在HTML中，即为< html>
4. ch
   即“进距”。可以简单理解为“一个字符”。
   CSS3定义：

等于渲染时所用字体的“0”字形进距

对于从左往右或从右往左书写的语言，进距即为进宽。简单来说，字形的进宽就是一个字形的起点到另一个字形的起点之间的距离。一般情况下，这段距离等于字形自身的宽度加上侧边的间距（间距可为正也可为负）。

#test 
	{
		width:49ch;
		height:200px;
		border:1px solid red;
		background:pink;
		font-size:1.5vw;
	}

此处文本中有49个“0”，我们把宽度设置为49ch，可以看到，宽度即为49个0字符的宽度。

5. 视区相关的单位 (浏览器窗口的大小)
   6. vw 指视区宽度除以100。比如视区宽度为999px，则1vw = 999px / 10 = 99.9px
   7. vh 指视区高度除以100。比如视区高度为666px，则1vh = 666px /10 = 66.6px
   8. vmin 等于视区高度或宽度的1/100。始终等于宽度和高度中最小的那个。比如视区宽为999px,高为666px，则1vmin = 1vh = 66.6px
   9. vmax 等于视区高度或宽度的1/100。始终等于宽度和高度中最大的那个。比如视区宽为999px,高为666px，则1vmax = 1vw = 99.9px

来源：CSDN

作者：shandamengcheng

链接：https://blog.csdn.net/shandamengcheng/article/details/104055049