溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css3新增的單位有哪些

發布時間:2022-01-13 09:45:16 來源:億速云 閱讀:209 作者:iii 欄目:web開發

本文小編為大家詳細介紹“css3新增的單位有哪些”,內容詳細,步驟清晰,細節處理妥當,希望這篇“css3新增的單位有哪些”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。

css3新增的單位:1、“ch”,字符0的寬度;2、“rem”,一個相對單位,主要是相對于根元素字體的大??;3、“vw”,視窗寬度;4、“vh”,視窗高度;5、“vmin”;6、“vmax”等。

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

CSS3中新增的長度單位

CSS3中新增的長度單位有如下,

  • ch,字符0的寬度

  • rem,是一個相對單位,主要是相對于根元素字體的大小,使用rem,我們需要參考指定的根元素。

  • vw,viewpoint width,視窗寬度,1vw=視窗寬度的1%

  • vh,viewpoint height,視窗高度,1vh=視窗高度的1%

  • vmin,vmax

新增的viewpoint相關的單位一般是針對移動設備的。

rem其實跟em是一回事,只不過rem多了一個限制條件,它表示根元素(html元素)的font-size。

remem的區別,我們可以通過下面這個例子來看一看,

<html style="font-size: 12px;">
<body>
    <div id="div1" style="font-size: 16px">
        <div id="div2" style="font-size: 1.2em"></div>
        <div id="div3" style="font-size: 1.2rem">
            <div id="div4" style="font-size: 1.2em"></div>
        </div>
    </div>
</body>
</html>

此時,

  • div2的font-size: 16px*1.2em=19.2px

  • div3的font-size: 12px*1.2rem=14.4px

  • div4的font-size: 12px*1.2rem*1.2em=17.28px

可見,rem不存在級聯關系,而em存在級聯關系。

值得注意的是,IE8及以下、Safari 4、IOS 3.2等不支持rem單位。

讀到這里,這篇“css3新增的單位有哪些”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女