溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS單位的應(yīng)用方法和場(chǎng)景”，在日常操作中，相信很多人在CSS單位的應(yīng)用方法和場(chǎng)景問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS單位的應(yīng)用方法和場(chǎng)景”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
測(cè)量長(zhǎng)度的單位可以是絕對(duì)的，例如像素，點(diǎn)等，也可以是相對(duì)的，例如百分比(%)和 em 單位。
指定 CSS 單位對(duì)于非零值是必須的，因?yàn)闆](méi)有默認(rèn)單位。丟失或忽略單位將被視為錯(cuò)誤。但是，如果該值為 0，則可以省略該單位(畢竟，零像素與零英寸是一樣的)。
注意： 長(zhǎng)度是指距離測(cè)量。長(zhǎng)度包括數(shù)字值，后面加單位，比如 10px、2em、50% 等。數(shù)字和單位之間不能出現(xiàn)空白。
相對(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-height 設(shè)置為 2.5em，則 line-height像素計(jì)算值為：2.5?x?16px?=?40px。
P { font-size: 16px; line-height: 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)樗ǔ５扔谛?x 的高度，如下所示。但是， ex 即使對(duì)于不包含 x 的字體，也會(huì)定義的。
P { font-size: 16ex; line-height: 2.5em; }
絕對(duì)長(zhǎng)度單位相對(duì)于彼此固定。它們高度依賴于輸出介質(zhì)，因此在輸出環(huán)境已知時(shí)主要有用。絕對(duì)單位由物理單位(的 in、cm、mm、pt、pc)和 px 單位。表中j進(jìn)行屬性的詳細(xì)介紹。
| 單位 | 描述 |
|---|---|
| in | 英寸 - 1 英寸等于 2.54 厘米。 |
| cm | 厘米。 |
| mm | 毫米。 |
| pt | points - 在 CSS 中，一個(gè)點(diǎn)定義為 1⁄72 英寸（0.353mm）。 |
| pc | picas - 1pc 等于 12pt。 |
| px | 像素單位 - 1px 等于 0.75pt。 |
絕對(duì)物理單位，例如 in、cm、mm 等應(yīng)被用于打印介質(zhì)和類似的高分辨率的設(shè)備。然而，對(duì)于桌面和低分辨率設(shè)備等屏幕顯示，建議使用像素或 em 單位。
例：
h2 { margin: 0.5in; } /* inches */ h3 { line-height: 3cm; } /* centimeters */ h4 { word-spacing: 4mm; } /* millimeters */ h5 { font-size: 12pt; } /* points */ h6 { font-size: 1pc; } /* picas */ h7 { font-size: 12px; } /* picas */提示： 使用相對(duì)單位(如 em 或百分比 %)的樣式表可以更輕松地從一個(gè)輸出環(huán)境擴(kuò)展到另一個(gè)輸出環(huán)境。
本文主要介紹了css單位的運(yùn)用，通過(guò)兩個(gè)方面展開，相對(duì)長(zhǎng)度單位，絕對(duì)長(zhǎng)度單位，在項(xiàng)目中需要注意的點(diǎn)，需要注意的事項(xiàng)，都進(jìn)行了詳細(xì)的講解和提供了對(duì)應(yīng)的解決方案。
到此，關(guān)于“CSS單位的應(yīng)用方法和場(chǎng)景”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼