亚洲国产成人av在线观看,xxxx18日本护士hd,亚洲精品午夜国产va久久成人

首頁 > 博客列表 > em和rem的聯(lián)系和區(qū)別

博主信息

博文 37

粉絲 0

評論 0

訪問量 43288

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

em和rem的聯(lián)系和區(qū)別

em和rem都是計量單位，都能表示尺寸，更適用于響應(yīng)式布局但他們的用途不同！

em是什么？

瀏覽器默認(rèn)的文本字號，通常是16px，也就是1em=16px
em的使用：設(shè)置響應(yīng)式文本的字號。em有繼承性，使用父元素的字號font-size的值

rem是定義字號使用的。

html是根元素，一個頁面中它是唯一的且最大的包含塊，所以在html中定義em的大小，可以看成一個常量。html的所有后代元素，想引用html中的字號，就不能用em！因為em有繼承性！

兩者區(qū)別：

對于em和rem的區(qū)別一句話概括：em相對于父元素，rem相對于根元素。

em的使用

<style>
    /*
    html是根元素，通常瀏覽器在html設(shè)置的字號是16px
    如果想改變默認(rèn)字號，則修改font-size的值
    1em=font-size的值
    */
 html{
     font-size:20px;
 }
    /*設(shè)置div的寬高em*/
    div{
    width=10em;/* 10em * 20 */
    height=5em;/* 5em * 20 */
    }
    .test{
        font-size:2em;/*em的繼承性，則現(xiàn)在 1em=2*20px =40px */
    }
    /* 此時div的寬高就變成了 10em * 40  */
</style>
<body>
    <div class="test"></div>
</body>

rem的使用

<style>
 html{
     /* 1.25 *16 = 20px*/
     font-size:1.25em;
 }
    div{
        /* rem是相對于html，不受外界影響*/
        width:10rem; /* 10 * 20px */
        height:5rem;
    }
    .test{
        font-size:2rem;/* 2*20px=40px */
    }
    /* rem沒有繼承性只參照html。所以 寬高不變還是 10 * 20px */
</style>
<body>
    <div class="test"></div>
</body>

vh和vw

學(xué)習(xí)vh和vw之前先了解視口，視口就是可視窗口，就是瀏覽器窗口中用于顯示文檔的可視區(qū)域
vh:視口的 “初始包含塊” 的高度的百分之一(1/100)
vw：視口的 “初始包含塊” 的寬度的百分之一（1/100）
注：初始包含塊：目前可以簡單的理解為 “html”
通俗講就是將窗口劃分寬高劃分100份，

<style>
    /*
    div占據(jù)窗口的寬高各50份。也就是一半
    */
.box{
    width:50vw;
    height:50vh;
    background-color:red;
    margin:auto;
}
</style>
<body>
    <div class="box"></div>
</body>

批改老師：

天蓬老師

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

html的基本標(biāo)簽介紹

2020-12-09 11:43:07

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱