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