溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“css3的長度單位怎么用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css3的長度單位怎么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
使用方法：1、em表示相對于當前對象內文本的字體大小；2、rem表示相對于根元素的字體大小；3、ch表示數字0的大小；4、vh表示百分比視口的高度；5、vw表示百分比視口的寬度；6、ex表示當前字體的小寫x字母的的高度或者1/2的1em。
本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。
css3新增長度單位有：
em：相對于當前對象內文本的字體大小。相對于父節點的字體大小
rem：相對于根元素<html>的字體大小。應用場景：以文字內容決定布局的。
vh和vv：1vh等于1/100的視口高度①，1vw等于1/100的視口寬度。
vmin和vmax：關于視口高度和寬度的最小值或最大值，vmin等于1/100的視口寬高中的最小值。應用場景：讓一個元素始終在屏幕中可見。
ch：數字0的寬度
ex：當前字體的小寫x字母的的高度或者1/2的1em②。應用場景：上實上標和下標
ch -- 字符0(零)的寬度
rem -- 根元素(html元素)的font-size
什么意思呢？
比如，根元素html的字體大小是100px，那么，根元素下面的元素設置的rem，都是 1rem = 100px。
rem的初始值是16px，也就是說在沒有設置根節點的 font-size時候，1rem = 16px
切記，是相對于根元素html，如果設置body，則不會起作用
謹記：vw和vh只相對于瀏覽器可視區域，即 window.innerHeight，window.innerWidth
vw -- 瀏覽器可視區域， 1vw 等于 瀏覽器可視區域寬度的 1%
vh -- 瀏覽器可視區域， 1vh 等于 瀏覽器可視區域高度的 1%
vmin -- vw和vh中較小的那個
vmax -- vw和vh中較大的那個
比如瀏覽器寬/高 設置為 1000px/600px
那么，
2vmin = 600*2/100 = 12px 2vmax = 1000*2/100 = 20px
讀到這里，這篇“css3的長度單位怎么用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
