首頁 > 文章 > web前端 > css3新增了哪些單位

css3新增了哪些單位

青灯夜游原創: 2022-01-12 17:17:072089瀏覽

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%
#vmin，vmax等

#新增的viewpoint相關的單位一般是針對行動裝置的。

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

rem和em的區別，我們可以透過下面這個例子來看一看，

<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中文網其他相關文章！

html5 css safari css3 html ios

陳述：

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

上一篇：h5和css3有什麼優點下一篇：h5和css3有什麼優點

看更多