編程教程

　　 編程問答　 ACM與藍(lán)橋杯競賽入門　 C語言教程　 C++教程　 數(shù)據(jù)結(jié)構(gòu)教程　 Python教程　 JAVA教程　 編譯器教程　 C語言函數(shù)庫　 更多教程

CSS長度單位詳細(xì)總結(jié)

97466 閱讀 0 評論 1 點(diǎn)贊

?、CSS中的長度單位

在CSS中以不少值是以長度作為值的，盒?模型的屬性就是?些明顯的值屬性：width、height、margin、padding、border。除此之外還有很多的css屬性的值同樣也是長度值，像偏移量offset、box-shadow的??或字體??、間距等，在CSS中存在眾多的長度單位，下?我們就來說?下長度單位以及它們的?途。

?、簡單的介紹（長度單位都有哪些：）

在CSS的長度單位分為兩種：絕對長度和相對長度。

絕對長度：px、in、cm、mm、pt、pc；

相對長度：em、rem、ex、vh、vw、vmin、vmax、%、fr。

三、詳細(xì)的介紹

1. 絕對長度單位

絕對長度單位表示一個(gè)真實(shí)的物理尺寸，它的大小是固定的，不會因?yàn)槠渌爻叽绲淖兓兓?。下表中列舉了 CSS 中支持的絕對長度單位。

px：表?像素，像素是相對于屏幕分辨率的，頁?按照精確像素展?，不會因?yàn)槠渌氐某?變化?變化，像素仍然是最典型的度量單位，例如： windows 的?戶所使?的分辨率96像素/英? ，? mac 的?戶所使?的分辨率?般是 72像素/英? ，?般javascript語??的單位就是使?的像素。

div {
width: 200px;
}

in：英?（inch）是?個(gè)物理度量?件，但是在CSS領(lǐng)域，英?只不過被直接映射成像素罷了。（1in == 2.54cm == 96px）

div {
width: 2in;
}

cm：厘?是?較熟悉有?的物理度量單位。它也映射成像素。（1cm == 37.8px）

div {
width: 20cm;
}

mm：毫?是個(gè)?數(shù)量級的物理度量單位。（1mm == 0.1cm == 3.78px ）

div {
width: 200mm;
}

pt：點(diǎn)（Points）也是物理長度單位。（1pt == 1/72in == 96/72px）

div {
width: 20pt;
}

pc：派卡（Pica）和points?樣，只不過（1pc == 12pt）。

div {
width: 20pt;
}

舉例：

<!DOCTYPE html>
<html>
    <head>
        <title>絕對長度單位</title>
        <style>
            .box{
                width: 4in;
                height: 4.5cm;
                border: 2mm solid black;
                font-size: 16px;
            }
            .pt{
                font-size: 2pt;
            }
            .pc{
                font-size: 3pc;
            }
        </style>
    </head> 
    <body>
        <div class="box">
            這是 16px 的字體
            <p class="pt">這是 2pt 的字體</p>
            <p class="pc">這是 3pc 的字體</p>
        </div>  
    </body>
</html>

呈現(xiàn)出來的結(jié)果如下：

絕對長度單位

2. 相對長度單位

相對長度單位指的是這個(gè)單位沒有一個(gè)固定的值，它的值受到其它元素屬性（例如瀏覽器窗口的大小、父級元素的大?。┑挠绊懀陧憫?yīng)式布局方面相對長度單位非常適用，下表中列舉了 CSS 中支持的相對長度單位。

em：em是?個(gè)相對單位，相對于當(dāng)前對象內(nèi)?本的字體尺?，如當(dāng)前對?內(nèi)的字體尺?未被?設(shè)置，則相對于瀏覽器的默認(rèn)字體尺?。起初排版度量時(shí)是基于當(dāng)前字體?寫字母 M 的尺?的，當(dāng)改變font-family時(shí)，它的尺?不會發(fā)?改變，但在改變font-size的??時(shí)，它的尺?就會發(fā)?改變， em 會繼承 ?級元素的字體??。(下?有關(guān)于 em 和 rem 的例?)

在沒有任何CSS規(guī)則的前提下：（1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm）

div {
width:40em;
}

rem：rem 和 em ?樣是?個(gè)相對單位，但是和 em 不同的是 rem 總是相對于根元素（如：root{}），?不像em?樣使?級聯(lián)的?式來計(jì)算尺?。這種相對單位使?起來更簡單。

div {
width:40rem;
}

ex：相對長度單位，相對于字符 "x" 的?度，此?度通常為字體尺?的?半，如當(dāng)前對?內(nèi)的?本的字體尺?未被?為設(shè)置，這相對于瀏覽器的默認(rèn)字體尺?。和 em 不同，當(dāng)改變 font-family 時(shí) em 不會改變，? ex 單位會變化，因?yàn)?個(gè)單位的值和那個(gè)字體是特殊的約束關(guān)系。

div {
width:40ex;
}

ch：ch的內(nèi)涵和ex相對于x的?度相似，只是 ch 是基于字符 0 的寬度的?不是基于字符 x ?度的。1ch也就是數(shù)字0的寬度，當(dāng) fontfamily 改變的時(shí)候 ch 也會隨著改變。

div {
width:40ch;
}

vw：vw（viewpoint width）是可視寬度單位（視窗寬度）， 1vw 等于可視區(qū)寬度的百分之? ，vw單位跟百分?很相似，不同的是vw所有的值對所有的元素都?樣，與他們?元素或 ?元素的寬度 ?關(guān)，有點(diǎn)像rem單位那樣總是相對于根元素。(下?有關(guān)于 vh 和 vw 的例?)

div {
width:40vw;
}

vh：vh（viewport height）和vw（viewport width）單位?樣，不同的vh是相對于可視區(qū)的?度（視窗?度）。

div {
width:40vh;
}

vmin：vmin的值是當(dāng)前vw和vh中較小的值，在標(biāo)準(zhǔn) 尺?類型的使?實(shí)例中，和由??確定屏幕大小的vw、vh單位相?，vmin是?個(gè)更有?的度量標(biāo)準(zhǔn)。

div {
width:40vmin;
}

vmax：vmax的值是vw和vh中較? 的那個(gè)值。

div {
width:40vmax;
}

%：百分比，以百分?為單位的長度值是基于具有相同屬性的 ?元素的長度值，例如：如果?個(gè)元素呈現(xiàn)的寬度是450px，子元素的寬度設(shè)為50%，那么?元素呈現(xiàn)的寬度為225px。（如果所有的?級元素都沒有設(shè)置具體的值，那么設(shè)置百分??度那會導(dǎo)致所有的元素的值都為0）。

div {
width:40%;
}

fr：gird布局中利?的?個(gè)長度單位，在gird布局中，我們經(jīng)常會利?fr來進(jìn)?計(jì)算。

下?這句語句則是聲明三?的gird，第??的?度為30px，第??的同樣為30px，第三?的為60px。

grid-template-rows: 30px 1fr 2fr;

舉例：

<!DOCTYPE html>
<html>
    <head>
        <title>相對長度單位</title>
        <style>
            .box{
                width: 60vw;
                height: 88vh;
                border: 1ex solid black;
                font-size: 16px;
            }
            .info{
                font-size: 2em;
            }
            .ex > span{
                font-size: 3ex;
            }
            .ch > span{
                font-size: 4ch;
            }
        </style>
    </head> 
    <body>
        <div class="box">
            這是 16px 的字體
            <p class="info">這是 2em 的字體</p>
            <p class="ex">
                x：<span>這是 3ex 的字體</span>
            </p>
            <p class="ch">
                0：<span>這是 4ch 的字體</span>
            </p>
        </div>  
    </body>
</html>

展示如下：相對長度單位

3. 長度單位的總結(jié)：

（1）?先要明??點(diǎn)，那就是屏幕分辨率究竟是什么，我們知道在不同的分辨率下，像素點(diǎn)的??是不同的，所以同?個(gè)?頁，以 px 作長度單位時(shí)，在不同的分辨率下顯?的??是不同的，在低分辨率下，像素點(diǎn)較?，細(xì)節(jié)不夠清晰，雖然顯?的頁?也?，但模糊不清。

（2）實(shí)際上，所有的單位，?論是相對還是絕對單位，（在屏幕上的顯?時(shí)）最終都是轉(zhuǎn)化為px單位的，所以?般來說，在?頁制作時(shí)，基本單位都選擇 px ?不是 pt，因?yàn)?pt 也是通過瀏覽器的 DPI 轉(zhuǎn)成 px 顯?（?如FireFox的DPI是96，則有9pt = 12px）。不僅pt，cm、in、mm等單位也是轉(zhuǎn)換成px的，所以?論?絕對還是相對，在不同的分辨率下都是會變的，不要以為把長度設(shè)置為3cm，它就會在不同的分辨率下保持3cm不變。

（3）我覺得 pt 還是很有?的?個(gè)單位，在打印時(shí)尤其如此，現(xiàn)在有的?頁以及經(jīng)實(shí)現(xiàn)了顯?是?個(gè)頁?，打印?另?種?式，我想在打印上就采? pt 吧，因?yàn)獒槍Σ煌姆直媛剩蛴〕鰜淼捻?都是?樣的??，這就是絕對單位的第?特征，但是依然要記住，在顯?上，這個(gè)單位代表的不是真實(shí)物理長度，它也是要根據(jù)像素的實(shí)際??（這個(gè)跟分辨率有關(guān)）進(jìn)?調(diào)整的。

（4）實(shí)際上我們可以這樣理解，將px看做絕對單位（顯?上的絕對單位），其它的單位都是以它為基礎(chǔ)的，?如em，它就是相對當(dāng)前?本字體的?度（假設(shè)當(dāng)前?本字體的尺?是12px，我們設(shè)置新的字體為1.5em，則新的字體尺?轉(zhuǎn)換為12 * 1.5 = 18px），要記住的就是em是相對于 ?級元素的?度，假設(shè)第?個(gè)div中我們設(shè)置了字體為12px，第?級我們設(shè)置1.5em，第三級我們設(shè)置1.5em，實(shí)際上字體的顯?是：第?級12px，第?級18px，第三級18 * 1.5 = 27px。

點(diǎn)贊(1)