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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

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