溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css3的長(zhǎng)度單位怎么用

發(fā)布時(shí)間：2022-01-24 13:34:04 來源：億速云 閱讀：141 作者：iii 欄目：web開發(fā)

本文小編為大家詳細(xì)介紹“css3的長(zhǎng)度單位怎么用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css3的長(zhǎng)度單位怎么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

使用方法：1、em表示相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體大小；2、rem表示相對(duì)于根元素的字體大??；3、ch表示數(shù)字0的大??；4、vh表示百分比視口的高度；5、vw表示百分比視口的寬度；6、ex表示當(dāng)前字體的小寫x字母的的高度或者1/2的1em。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3新增長(zhǎng)度單位的使用方法是什么

css3新增長(zhǎng)度單位有：

  • em：相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體大小。相對(duì)于父節(jié)點(diǎn)的字體大小

  • rem：相對(duì)于根元素<html>的字體大小。應(yīng)用場(chǎng)景：以文字內(nèi)容決定布局的。

  • vh和vv：1vh等于1/100的視口高度①，1vw等于1/100的視口寬度。

  • vmin和vmax：關(guān)于視口高度和寬度的最小值或最大值，vmin等于1/100的視口寬高中的最小值。應(yīng)用場(chǎng)景：讓一個(gè)元素始終在屏幕中可見。

  • ch：數(shù)字0的寬度

  • ex：當(dāng)前字體的小寫x字母的的高度或者1/2的1em②。應(yīng)用場(chǎng)景：上實(shí)上標(biāo)和下標(biāo)

ch -- 字符0(零)的寬度

rem -- 根元素(html元素)的font-size

什么意思呢？

比如，根元素html的字體大小是100px，那么，根元素下面的元素設(shè)置的rem，都是 1rem = 100px。

rem的初始值是16px，也就是說在沒有設(shè)置根節(jié)點(diǎn)的 font-size時(shí)候，1rem = 16px

切記，是相對(duì)于根元素html，如果設(shè)置body，則不會(huì)起作用

謹(jǐn)記：vw和vh只相對(duì)于瀏覽器可視區(qū)域，即 window.innerHeight，window.innerWidth

vw -- 瀏覽器可視區(qū)域， 1vw 等于 瀏覽器可視區(qū)域?qū)挾鹊?1%

vh -- 瀏覽器可視區(qū)域， 1vh 等于 瀏覽器可視區(qū)域高度的 1%

vmin -- vw和vh中較小的那個(gè)

vmax -- vw和vh中較大的那個(gè)

比如瀏覽器寬/高 設(shè)置為 1000px/600px

那么，

2vmin = 600*2/100 = 12px
2vmax = 1000*2/100 = 20px

讀到這里，這篇“css3的長(zhǎng)度單位怎么用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手