絕對(duì)長(zhǎng)度

px

px是像素值，是一個(gè)固定的長(zhǎng)度，比如我們的米，厘米一樣。

相對(duì)長(zhǎng)度

為什么我們需要相對(duì)長(zhǎng)度rem em等？

固定長(zhǎng)度已經(jīng)不能滿足我們現(xiàn)在的需求了。

舉例：比如我們?cè)诳s小我們屏幕的時(shí)候，我們不僅僅是需要縮小我們的盒子的寬高，我們還想要讓我們字體大小也隨之縮小，這樣用戶體驗(yàn)會(huì)更好一點(diǎn)。

rem

rem 與 px 的計(jì)算關(guān)系

rem的值是px的倍數(shù)

默認(rèn)情況下font-size = 16px,那么1rem = 16px

rem 如何修改與px的相對(duì)計(jì)算關(guān)系

我們可以在并且只能在html標(biāo)簽（因?yàn)閔tml節(jié)點(diǎn)是根節(jié)點(diǎn)，就是rem里面的r：root）里面修改font-size : 32px， 從而1rem = 32px

代碼

<p class="p-rem">rem</p> /* rem的用法 */ html{     font-size:16px;  // 1rem = 16px } .p-rem{     width: 10rem;    // 10rem = 10 x 16 = 160px     height: 10rem;   // 10rem = 10 x 16 = 160px     font-size: 1rem; // 1rem = 16px     background-color: #a58778; }

em

em 與 px 的計(jì)算關(guān)系

em的值是px的倍數(shù)

默認(rèn)情況下font-size = 16px,那么1em = 16px

em 如何修改與px的相對(duì)計(jì)算關(guān)系

我們可以在自己元素上面修改font-size : 32px， 從而1em = 32px

如果自己元素上面沒(méi)有設(shè)置font-size, 我們也可以在父元素上面設(shè)置font-size，從而來(lái)影響自己元素（孩子元素）使用的em的值。

推薦教程：《CSS教程》