一篇文章帶你了解CSS單位相關(guān)知識
大家好，我是皮皮，今天給大家分享一些前端的知識。
一、了解 CSS 單位
測量長度的單位可以是絕對的，例如像素，點等，也可以是相對的，例如百分比(%)和 em 單位。
指定 CSS 單位對于非零值是必須的，因為沒有默認(rèn)單位。丟失或忽略單位將被視為錯誤。但是，如果該值為 0，則可以省略該單位(畢竟，零像素與零英寸是一樣的)。
注意： 長度是指距離測量。長度包括數(shù)字值，后面加單位，比如 10px、2em、50% 等。數(shù)字和單位之間不能出現(xiàn)空白。
二、相對長度單位
相對長度單位指定相對于另一個長度屬性的長度。相對單位是 描述 ：em當(dāng)前的字體大小 。
ex ：當(dāng)前字體的 x 高度 。
em 和 ex 單位取決于套用至元素的字體大小。
1. 使用 em 單位
em 的值等于使用它的元素的 font-size 屬性的計算值。它可用于垂直或水平測量。
例如，如果 font-size 元素設(shè)置為 16px，并且 line-height 設(shè)置為 2.5em，則 line-height像素計算值為：2.5?x?16px?=?40px。
- P {
- font-size: 16px;
- line-height: 2.5em;
- }
運(yùn)行效果
當(dāng)在 font-size 屬性本身的值中指定 em 時會發(fā)生異常，在這種情況下，它引用父元素的字體大小。
因此，當(dāng)我們用 em 指定字體大小時，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>平安保險</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>項目</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。我們的第一步是通過將主體設(shè)置 font-size 為 62.5% 來減小整個文檔的大小，這會將字體大小重置為 10px(16px 的 62.5%)。
這是默認(rèn) font-size的四舍五入，方便 px 到 em的轉(zhuǎn)換。
2. 使用 ex 單位
ex 單位等于當(dāng)前字體的 x 高度。
所謂的 x 高度是因為它通常等于小寫 x 的高度，如下所示。但是， ex 即使對于不包含 x 的字體，也會定義的。
- P {
- font-size: 16ex;
- line-height: 2.5em;
- }
三、絕對長度單位
絕對長度單位相對于彼此固定。它們高度依賴于輸出介質(zhì)，因此在輸出環(huán)境已知時主要有用。絕對單位由物理單位(的 in、cm、mm、pt、pc)和 px 單位。表中j進(jìn)行屬性的詳細(xì)介紹。
| 單位 | 描述 |
|---|---|
| in | 英寸 - 1 英寸等于 2.54 厘米。 |
| cm | 厘米。 |
| mm | 毫米。 |
| pt | points - 在 CSS 中，一個點定義為 1⁄72 英寸（0.353mm）。 |
| pc | picas - 1pc 等于 12pt。 |
| px | 像素單位 - 1px 等于 0.75pt。 |
絕對物理單位，例如 in、cm、mm 等應(yīng)被用于打印介質(zhì)和類似的高分辨率的設(shè)備。然而，對于桌面和低分辨率設(shè)備等屏幕顯示，建議使用像素或 em 單位。
例：
- h1 {
- margin: 0.5in;
- }
- /* inches */
- h2 {
- line-height: 3cm;
- }
- /* centimeters */
- h3 {
- word-spacing: 4mm;
- }
- /* millimeters */
- h4 {
- font-size: 12pt;
- }
- /* points */
- h5 {
- font-size: 1pc;
- }
- /* picas */
- h6 {
- font-size: 12px;
- }
- /* picas */
提示： 使用相對單位(如 em 或百分比 %)的樣式表可以更輕松地從一個輸出環(huán)境擴(kuò)展到另一個輸出環(huán)境。
四、總結(jié)
本文主要介紹了css單位的運(yùn)用，通過兩個方面展開，相對長度單位，絕對長度單位，在項目中需要注意的點，需要注意的事項，都進(jìn)行了詳細(xì)的講解和提供了對應(yīng)的解決方案。代碼很簡單，希望可以幫助你學(xué)習(xí)。
如果在操作過程中有任何問題，記得下面留言，我們看到會第一時間解決問題。
【編輯推薦】
- 幾天狂增 1.1 萬 Star！谷歌這個腳本工具必須推薦一波
- 老板偷偷監(jiān)控了我的微信聊天......
- 微軟Windows 10 KB5003173 更新安裝失敗，原因是沒有新版 Edge 瀏覽器
- 面試官：如何理解UDP 和 TCP? 區(qū)別? 應(yīng)用場景?
- 揚(yáng)開源之帆，借官方認(rèn)證考試之勢，在NGINX領(lǐng)域脫穎而出
分享到微信 
分享到微博
2024-01-30 13:47:45
