CSS單位是什么?該怎樣表示?
一、了解 CSS 單位
測(cè)量長(zhǎng)度的單位可以是絕對(duì)的,例如像素,點(diǎn)等,也可以是相對(duì)的,例如百分比(%)和 em 單位。
指定 CSS 單位對(duì)于非零值是必須的,因?yàn)闆]有默認(rèn)單位。丟失或忽略單位將被視為錯(cuò)誤。但是,如果該值為 0,則可以省略該單位(畢竟,零像素與零英寸是一樣的)。
注意: 長(zhǎng)度是指距離測(cè)量。長(zhǎng)度包括數(shù)字值,后面加單位,比如 10px、2em、50% 等。數(shù)字和單位之間不能出現(xiàn)空白。
二、相對(duì)長(zhǎng)度單位
相對(duì)長(zhǎng)度單位指定相對(duì)于另一個(gè)長(zhǎng)度屬性的長(zhǎng)度。相對(duì)單位是 描述 :em當(dāng)前的字體大小 。
ex :當(dāng)前字體的 x 高度 。
em 和 ex 單位取決于套用至元素的字體大小。
1. 使用 em 單位
em 的值等于使用它的元素的 font-size 屬性的計(jì)算值。它可用于垂直或水平測(cè)量。
例如,如果 font-size 元素設(shè)置為 16px,并且 line-h(huán)eight 設(shè)置為 2.5em,則 line-h(huán)eight像素計(jì)算值為:2.5?x?16px?=?40px。
P { font-size: 16px; line-h(huán)eight: 2.5em;}
運(yùn)行效果

當(dāng)在 font-size 屬性本身的值中指定 em 時(shí)會(huì)發(fā)生異常,在這種情況下,它引用父元素的字體大小。
因此,當(dāng)我們用 em 指定字體大小時(shí),1em 繼承自 font-size。因此, font-size: 1.2em; 使文本比父元素的文本大 1.2 倍。
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> <title>平安保險(xiǎn)</title> <link rel="stylesheet" type="text/css" href="css/fy.css" /> </head>
<body> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>項(xiàng)目</title> <style> body { font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; }
p { font-size: 1.6em; }
p:firt-letter { font-size: 3em; font-weight: bold; }</style>
<body style="text-align: center; background-color: aquamarine;"> <div>ddad</div> <p> Hellow world</p> </body>
</html>

代碼解析:瀏覽器中字體的默認(rèn)大小為 16px。我們的第一步是通過(guò)將主體設(shè)置 font-size 為 62.5% 來(lái)減小整個(gè)文檔的大小,這會(huì)將字體大小重置為 10px(16px 的 62.5%)。
這是默認(rèn) font-size的四舍五入,方便 px 到 em的轉(zhuǎn)換。
2. 使用 ex 單位
ex 單位等于當(dāng)前字體的 x 高度。
所謂的 x 高度是因?yàn)樗ǔ5扔谛?x 的高度,如下所示。但是, ex 即使對(duì)于不包含 x 的字體,也會(huì)定義的。
P { font-size: 16ex; line-h(huán)eight: 2.5em;}

發(fā)表評(píng)論
請(qǐng)輸入評(píng)論內(nèi)容...
請(qǐng)輸入評(píng)論/評(píng)論長(zhǎng)度6~500個(gè)字
您提交的評(píng)論過(guò)于頻繁,請(qǐng)輸入驗(yàn)證碼繼續(xù)
驗(yàn)證碼: 刷新
圖片新聞
-

落地?zé)o錫!京東首個(gè)物流機(jī)器人超級(jí)工廠來(lái)了
-

OpenAI發(fā)布的AI瀏覽器,市場(chǎng)為何反應(yīng)強(qiáng)烈?
-

馬云重返一線督戰(zhàn),阿里重啟創(chuàng)始人模式
-

機(jī)器人奧運(yùn)會(huì)戰(zhàn)報(bào):宇樹機(jī)器人摘下首金,天工Ultra搶走首位“百米飛人”
-

存儲(chǔ)圈掐架!江波龍起訴佰維,索賠121萬(wàn)
-

長(zhǎng)安汽車母公司突然更名:從“中國(guó)長(zhǎng)安”到“辰致科技”
-

豆包前負(fù)責(zé)人喬木出軌BP后續(xù):均被辭退
-

字節(jié)AI Lab負(fù)責(zé)人李航卸任后返聘,Seed進(jìn)入調(diào)整期
最新活動(dòng)更多
-
6月30日立即申請(qǐng)?jiān)囉?> 【免費(fèi)試用】旭之源工業(yè)電源一一機(jī)器人的穩(wěn)定“心臟“
-
精彩回顧立即查看>> 【限時(shí)免費(fèi)】物理場(chǎng)仿真助力生物醫(yī)學(xué)領(lǐng)域技術(shù)創(chuàng)新
-
精彩回顧立即查看>> 【直播】 智測(cè)未來(lái)·2026海克斯康春季產(chǎn)品創(chuàng)新日
-
精彩回顧立即查看>> 【線下論壇】新唐科技×芯唐南京 2026 年度研討會(huì)
-
精彩回顧立即查看>> OFweek 2026(第十五屆)中國(guó)機(jī)器人產(chǎn)業(yè)大會(huì)
-
精彩回顧立即查看>> 維科杯· OFweek 2025中國(guó)機(jī)器人行業(yè)年度評(píng)選
推薦專題
-
2 華為,重大突破!
- 1 人形機(jī)器人“第一股”來(lái)了!宇樹科技即將上會(huì)
- 2 全球股市陷AI獨(dú)大結(jié)構(gòu)性瘋狂
- 3 AI狂歡遇上油價(jià)破百,全球股市還能漲多久? | 產(chǎn)聯(lián)看全球
- 4 DeepSeek融資500億,梁文鋒難逃資本局
- 5 谷歌2026 I/O大會(huì)完整回顧:模型依然重要,但智能體正在接管一切
- 6 全球資本,重倉(cāng)中國(guó)機(jī)器人
- 7 Figure AI 交付突破350臺(tái),陪跑特斯拉會(huì)迎來(lái)iPhone 時(shí)刻嗎?
- 8 Anthropic發(fā)布2028年全球AI領(lǐng)導(dǎo)力的兩種情景報(bào)告
- 9 “國(guó)產(chǎn)GPU第一股”摩爾線程首季扭虧,但造血能力仍待考驗(yàn)
- 10 特斯拉宣布監(jiān)督版FSD登陸中國(guó)?
- 高級(jí)軟件工程師 廣東省/深圳市
- 自動(dòng)化高級(jí)工程師 廣東省/深圳市
- 光器件研發(fā)工程師 福建省/福州市
- 銷售總監(jiān)(光器件) 北京市/海淀區(qū)
- 激光器高級(jí)銷售經(jīng)理 上海市/虹口區(qū)
- 光器件物理工程師 北京市/海淀區(qū)
- 激光研發(fā)工程師 北京市/昌平區(qū)
- 技術(shù)專家 廣東省/江門市
- 封裝工程師 北京市/海淀區(qū)
- 結(jié)構(gòu)工程師 廣東省/深圳市



分享





