css中有很多屬性可以接受長度值，比如： width, height, margin, padding, border-width, font-size, text-shadow。因為使用場景多，因此css也提供了許多長度單位。有的是日常生活中使用的單位，比如：厘公尺（cm）和英吋（in）；有的是印刷行業使用的單位，比如：point（pt）和pica（pc）；有的是專門為css發明的單位，比如：px。
使用場景
那麼這些屬性和單位怎麼配合使用呢？特定的屬性需要使用特定的單位嗎？其實並非如此，單位和屬性無關，同乙個屬性任何單位都適用，何時使用何種單位是沒有限制的，如果屬性接受以px為單位的值（比如：margin: 5px），那麼它也可以接受英吋或厘公尺（margin: 1.2in; margin: 0.5cm）為單位的值，反之亦然。
單位雖然和屬性無關，但是和輸出的媒介有一定關係，比如輸出到是螢幕還是紙張。在螢幕上顯示和在紙張上面列印推薦使用的單位是不一樣的。下表給出了推薦的使用方法：
輸出媒介
推薦偶爾使用
不推薦螢幕
em, px, %
expt, cm, mm, in, pc
列印em, cm, mm, in, pt, pc, %
px, ex
www.cppcns.com
除了和輸出媒介的關係，這些單位可以從長度值的計算方式區分為絕對單位和相對單位。
絕對單位
絕對單位（px，cm， mm，in，q，pt和pc）意味著以此為單位的長度值與其代表的物理長度相等，比如width: 1cm即與現實世界中的1cm長度相等，也意味著絕對單位在所有的媒介上的顯示效果是一致的。但這是理想情況，受顯示器和不同瀏覽器css實現的差異，在很多裝置上絕對單位顯示的並不精確。因為px和in的關係為1in=96px， 在低解析度裝置上，1px為1畫素（pixel，也是px名稱的由來）長度，而低解析度的螢幕上1px往往大於1/96in，所以從px計算得到的其他絕對單位值都不準確。而在高解析度裝置上（如現在的高清屏和印表機）絕對單位顯示得更精確。由於以上原因，絕對單位更多的是在列印時使用。
曾經，css要求在計算機螢幕上正確顯示絕對單位。但是由於大部分廠商並不能實現這一要求，所以css在2023年放棄了這一要求。目前，絕對單位僅在列印和高解析度裝置上正常工作。css沒有明確定義「高解析度」的含義。但是，由於目前低端印表機的每英吋點數為300 dpi，而高階螢幕的每英吋點數為200 dpi，因此所謂的「高解析度」可能介於兩者之間。。
下面貼出絕對單位直接的換算公式：
1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px
px作為css中最常用的單位，關於px還是有必要多說兩句的。px的特點可以歸納如下：
相對單位
相對單位意味著長度值是根據其他長度計算得出的。相對單位又可以分為基於字型（font based）和基於視窗（viewport based）的：
font based
em, ex
首先說說em和ex，em代表元素的當前字型大小，如果元素的font-size為2cm，那麼1em即表示2cm。em可以用於控制尺寸，比如margin: 1em; text-indent:1.5em，此時這些尺寸和元素字型大小相關，因此在大螢幕上（字型尺寸較大）和小螢幕上（字型尺寸較小）會等比縮放，因此em可以用於響應式的設計。如果em直接用於font-size屬性，如font-size: 2em，則em表示為父元素字型的大小。
ex很少被使用，ex表現的大小與程式設計客棧字型的x-height相關。x-height大致等於字型中小寫字母（例如a，c，m或o）的高度。相同font-size的不同字型的x-height可能會有很大的差別，所以使用ex產生的效果存在很大的不確定性。
remcss在2023年創造出了乙個新的單位rem，rem表示的是根元素（html元素的）字型大小，在每個元素裡面em都可能不一樣，但是rem都是一致的。因為這一特性，rem現在被更廣泛的應用於響應式設計。
chch用的表較少，是css3中新加入的單位，表示當前字型中的 "0" (零、unicode 字元 u+0030) 的寬度。
viewport based
v程式設計客棧w，wh，vmin，vmax
都是css3中新加入的單位。vw，vh可以根據視窗大小調整字型大小。vw是視窗的1/10www.cppcns.com0的寬度，而vh是視窗1/100的高度。此外還有vmin，它指的是vw以及vh間較小的那個，與之相對的還有vmax。這些單位在目前大部分瀏覽器上都有支援。
本文標題: 聊一聊css中的長度單位的使用
本文位址: /web/css/208796.html
聊一聊CSS中的 死迴圈
什麼是死迴圈呢？比如乙個元素裡面有一張vertical align為bottom同時高度為192畫素的，此時該高度就是192畫素，假設此時，插入乙個子元素，高度設為100 如果此時height 100 可以計算，則子元素應該也是192畫素。但是啊但是，我們的父元素height值是auto，豈不是現在...
聊一聊 Flask 的 jsonify
首先我們來看一段 python from flask import flask,jsonify tasks api v1.0 tasks methods get defget tasks return jsonify if name main true 在這段 裡面，我們看到了今天的主角jsonif...
聊一聊我的二 二
我是乙個二 二一年六月畢業的學軟體技術的大專生 也就是明年畢業 對於任何人來說，這一年裡是充滿挑戰的。可能乙個小小的想法，就會決定未來的走向。二 二 是對於所有人都是複雜的一年，特別是對於我.二 二 一年裡充滿了對於我是充滿悲傷的，疫情爆發，長輩離世，面臨就業問題等等，各種我不敢面對的事情。都出現在...