首頁  >  文章  >  web前端  >  css中設定長度的單位有哪些

css中設定長度的單位有哪些

青灯夜游
青灯夜游原創
2022-09-21 17:02:574744瀏覽

css長度單位有:1、em,相對字體長度單位,它的單位長度是根據元素的文字文字垂直長度來決定的;2、rem,相對字體長度單位,只相對根元素即html元素字體大小來確定其長度;3、%,相對於父元素寬度或字體大小的百分比;4、px,像素,是相對於顯示器螢幕解析度而言的;5、vw,相對於瀏覽器窗口的寬度;6、vh,相對於瀏覽器視窗的高度;7、ch,相對於所用字體中數字0的高度。

css中設定長度的單位有哪些

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

 CSS樣式由選擇器、屬性和值三個部分組成(例如p{width: 100px;}),在設定某些屬性值時可能會涉及與值對應的單位。 CSS 支援多種不同的長度單位,根據類型的不同可以分為兩類,分別是絕對長度單位(例如英吋、公分、點)和相對長度單位(例如百分比)。

1、相對長度單位

相對長度單位指的是這個單位沒有固定的值,它的值受到其它元素屬性(例如瀏覽器視窗的大小、父級元素的大小)的影響,在響應式佈局方面相對長度單位非常適用。

下表中列舉了CSS 中支援的相對長度單位:

##描述#範例emp{line-height:2em;}rem#p{font-size: 1.2rem;}ex相對於所用字體中小寫英文字母x 的高度,若無法確定x 的高度則使用0.5em 計算p{font-size: 1ex;}ch相對於所用字體中數字0 的高度,若無法確定0 的高度則使用0.5em 計算p{line-height: 3ch}##vw##vh相對於瀏覽器視窗的高度,1vh = 視窗高度的1%p{font-size: 5vh;}vminvw 與vh 中較小的值p{font-size: 5vmin;}vmaxvw 與vh 中較大的值p{ font-size: 5vmax;}%相對於父元素寬度或字體大小的百分比div{width: 55%}【範例】下面透過一個綜合的範例示範相對長度單位的使用:
<!DOCTYPE html>
<html>
    <head>
        <title>CSS中的单位</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>
#單位
相對字體長度單位,它的單位長度是根據元素的文字文字垂直長度來決定的。

相對於自身font-size(字體大小)屬性的值,如果本身沒有設置,則繼承父元素font-size 屬性的值,1em 等同於font-size 屬性值,例如font-size 的值為16px,那麼1em 就等於16px,2em 就等於32px

#相對字體長度單位,只相對根元素即html元素字體大小來決定其長度。

相對於根元素

的font-size 屬性的大小,例如根元素的font-size 是100px,那麼1.2rem 就相當於120px

相對於瀏覽器視窗的寬度,1vw = 視窗寬度的1% p{font-size: 5vw;}
運行結果如下圖所示:

css中設定長度的單位有哪些

2、絕對長度單位

#絕對長度單位表示一個真實的物理尺寸,它的大小是固定的,不會因為其它元素尺寸的變化而改變。下表中列舉了CSS 中支援的絕對長度單位:

#單位描述公分##p{font-size: 0.5cm;}p{font-size: 5mm;}p{ font-size: 1in;}#像素,相對於顯示器螢幕解析度而言的(1px = 1/96in)p{font-size: 16pt;}p{font-size: 5pc ;}【範例】下面透過一個綜合的範例示範絕對長度單位的使用:運行結果如下圖所示:
##範例 cm
##mm mm
in 吋(1in = 96px = 2.54cm)
px
p{font-size: 16px;}

pt
point,是一種專用的印刷單位“磅”,也可以稱為“點”(1pt = 1/72in)
pc #pica,中文可稱為“派卡”,印刷業用於描述字體大小的單位,相當於我國新四號鉛字的尺寸(1pc = 12pt)
<!DOCTYPE html>
<html>
    <head>
        <title>CSS中的单位</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>

(學習影片分享:

web前端

以上是css中設定長度的單位有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn