在css中存在眾多的長度單位，它們又有什麼意思與用途呢？
在css中，長度單位分為兩種，絕對長度與相對長度
絕對長度：px,cm,in,mm,pt,px,px
相對長度：%,em,rem,vh,vw,vmin,vmax,fr
絕對長度
px:即畫素pixel，它是最基礎也是最常用的乙個長度單位
cm:即厘公尺， 1cm=37.8px
mm:即公釐，1mm=3.78px
in：即英呎inch， 1in=2.54cm=96px
pt:即點point，1pt=1/72in=1.33px
pc:即派卡，1pc=12pt=16px，派卡是印刷行業的長度單位
相對長度
em:乙個字元大小，字元大小在瀏覽器中預設為16px
rem:相對於根元素html的字型大小，我們將html字型大小設定為100px，則可以更為方便的計算
%：百分比是乙個相對長度單位，相對於包含塊（containing block）的高寬或字型大小
關於包含塊（containing block）的概念，不能簡單地理解成是父元素。
如果是靜態定位和相對定位，包含塊一般就是其父元素。
如果是絕對定位的元素，包含塊應該是離它最近的 position為非static屬性的祖先元素。
如果是固定定位的元素，它的包含塊是視口（viewport）
vh:視口高度，預設為視口高度的1%
vw：視口寬度，預設為視口寬度的1%
vmin：布局視口高度和寬度之中值較小的那個的 1/100
vmax：布局視口高度和寬度之中值較大的那個的 1/100
fr:grid布局中利用的乙個長度單位。在gird布局中，我們經常會利用fr來進行計算
grid-template-rows: 30px 1fr 2fr;
上面這句語句則是宣告三行的grid，第一行的高度為30px,第二行的同樣為30px，第三行的為60px
理解css中的長度單位
很基礎的乙個問題，但是，其實看起來很複雜的樣子 我們來捋一捋吧 css3中也對css中用到的單位進行了改進，單位也就是那幾個，所以我們要搞清楚再用。我們常用的有px em，px就不多說了，em和 多說點兒 1 2 3.box 元素的行高是當前元素繼承的font size的1.3倍，1 2 3.box...
css 長度單位
畫素 螢幕 顯示器 實際上是由乙個乙個的小點點構成的 不同螢幕的畫素大小是不同的，畫素越小的螢幕顯示的效果越清晰 所以同樣的200px在不同的裝置下顯示效果不一樣 百分比 也可以將屬性值設定為相對於其父元素屬性的百分比 設定百分比可以使子元素跟隨父元素的改變而改變 doctype html en u...
CSS的長度單位
css相對長度單位中的相對二字，表明了其長度單位會隨著它的參考值的變化而變化，不是固定的。以下是css相對長度單位列表 css相對長度單位 說明em 元素的字型高度the height of the element s font ex字母x的高度the height of the letter x ...