首頁 > web前端 > 前端問答 > css3新增了哪些單位

css3新增了哪些單位

青灯夜游
發布: 2022-01-12 17:17:07
原創
2140 人瀏覽過

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

css3新增了哪些單位

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

CSS3中新增的長度單位

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

  • ch,字元0的寬度

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

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

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

  • #vminvmax

#新增的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.2 rem=14.4px

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

可見,rem

不存在級聯關係,而

em存在級聯關係。

值得注意的是,IE8以下、Safari 4、IOS 3.2等不支援

rem單位。

(學習影片分享:###css影片教學###)###

以上是css3新增了哪些單位的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板