建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSS長度單位匯總
通過前面的學(xué)習(xí)我們知道一個 CSS 樣式由選擇器、屬性和值三個部分組成（例如
圖1：相對長度單位的應(yīng)用
圖2：絕對長度單位的應(yīng)用
p{width: 100px;}），在設(shè)置某些屬性值時可能會涉及到與值對應(yīng)的單位。CSS 支持多種不同的長度單位，根據(jù)類型的不同可以分為兩類，分別是絕對長度單位（例如英寸、厘米、點）和相對長度單位（例如百分比）。本節(jié)我們就來簡單了解一下 CSS 中的幾種度量單位。
成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比襄垣網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式襄垣網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋襄垣地區(qū)。費用合理售后完善，十載實體公司更值得信賴。
1. 相對長度單位
相對長度單位指的是這個單位沒有一個固定的值，它的值受到其它元素屬性（例如瀏覽器窗口的大小、父級元素的大?。┑挠绊懀陧憫?yīng)式布局方面相對長度單位非常適用。下表中列舉了 CSS 中支持的相對長度單位：
| 單位 | 描述 | 示例 |
|---|---|---|
| em | 相對于自身 font-size（字體大小）屬性的值，如果自身沒有設(shè)置，則繼承父元素 font-size 屬性的值，1em 等同于 font-size 屬性值，例如 font-size 的值為 16px，那么 1em 就等于 16px，2em 就等于 32px | p{line-height:2em;} |
| rem | 相對于根元素 的 font-size 屬性的大小，比如根元素的 font-size 是 100px，那么 1.2rem 就相當(dāng)于 120px | p{font-size: 1.2rem;} |
| ex | 相對于所用字體中小寫英文字母 x 的高度，若無法確定 x 的高度則使用 0.5em 計算 | p{font-size: 1ex;} |
| ch | 相對于所用字體中數(shù)字 0 的高度，若無法確定 0 的高度則使用 0.5em 計算 | p{line-height: 3ch} |
| vw | 相對于瀏覽器窗口的寬度，1vw = 窗口寬度的 1% | p{font-size: 5vw;} |
| vh | 相對于瀏覽器窗口的高度，1vh = 窗口高度的 1% | p{font-size: 5vh;} |
| vmin | vw 與 vh 中較小的值 | p{font-size: 5vmin;} |
| vmax | vw 與 vh 中較大的值 | p{font-size: 5vmax;} |
| % | 相對于父元素寬度或字體大小的百分比 | div{width: 55%} |
【示例】下面通過一個綜合的示例演示相對長度單位的使用：
CSS中的單位
這是 16px 的字體
這是 2em 的字體
x：這是 3ex 的字體
0：這是 4ch 的字體
運行結(jié)果如下圖所示：
圖1：相對長度單位的應(yīng)用
2. 絕對長度單位
絕對長度單位表示一個真實的物理尺寸，它的大小是固定的，不會因為其它元素尺寸的變化而變化。下表中列舉了 CSS 中支持的絕對長度單位：
| 單位 | 描述 | 示例 |
|---|---|---|
| cm | 厘米 | p{font-size: 0.5cm;} |
| mm | 毫米 | p{font-size: 5mm;} |
| in | 英寸（1in = 96px = 2.54cm） | p{font-size: 1in;} |
| px | 像素（1px = 1/96in） | p{font-size: 16px;} |
| pt | point，是一種專用的印刷單位“磅”，也可以稱為“點”（1pt = 1/72in） | p{font-size: 16pt;} |
| pc | pica，中文可稱為“派卡”，印刷行業(yè)用于描述字體大小的單位，相當(dāng)于我國新四號鉛字的尺寸（1pc = 12pt） | p{font-size: 5pc;} |
【示例】下面通過一個綜合的示例演示絕對長度單位的使用：
CSS中的單位
這是 16px 的字體
這是 2pt 的字體
這是 3pc 的字體
運行結(jié)果如下圖所示：
圖2：絕對長度單位的應(yīng)用
文章題目：CSS長度單位匯總
轉(zhuǎn)載來于：http://fisionsoft.com.cn/article/djdiijp.html
