CSS之长度单位

浪尽此生 提交于 2020-01-21 04:08:21

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;
	}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ywWT5WJD-1579486504259)(./1579484613458.png)]
1in = 2.54cm
2. cm

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Ey842D6-1579486504273)(./1579484780541.png)]
3. mm 基本如上
4. q

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jo1sNPCe-1579486504277)(./1579485035931.png)]

相对长度单位

  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字符的宽度。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fUtACihH-1579486504280)(./1579486341167.png)]

  1. 视区相关的单位 (浏览器窗口的大小)
    1. vw 指视区宽度除以100。比如视区宽度为999px,则1vw = 999px / 10 = 99.9px
    2. vh 指视区高度除以100。比如视区高度为666px,则1vh = 666px /10 = 66.6px
    3. vmin 等于视区高度或宽度的1/100。始终等于宽度和高度中最小的那个。比如视区宽为999px,高为666px,则1vmin = 1vh = 66.6px
    4. vmax 等于视区高度或宽度的1/100。始终等于宽度和高度中最大的那个。比如视区宽为999px,高为666px,则1vmax = 1vw = 99.9px
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!