日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

px和em和rem的區別

作者：葉子yes 更新時間： 2022-07-22 編程語言

px

px是像素單位，是相對屏幕寬高度而言，一旦設定就無法隨瀏覽器尺寸的改變而改變。

示例：設置padding為30px，寬高100px

<style>
    div{
      padding: 30px;
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
</style>

<body>
  <div>我是一個div</div>
</body>

在這里插入圖片描述

em

em是相對長度單位，相對當前元素的字體大小而言。

示例：我們給div設置padding為1em

<style>
    div{
      padding: 1em;
      border: 1px solid black;
    }
</style>

<body>
  <div>我是一個div</div>
</body>

在這里插入圖片描述
可以看出默認 1em = 16px （因為默認字體大小為16px）

我們設置font-size為28px，再來看一下：

div{
      font-size: 28px;
      padding: 1em;
      border: 1px solid black;
    }

在這里插入圖片描述
可以看出padding變成了28px，所以em設置的值不是固定的，會隨當前元素的字體大小的變化而變化。

rem

rem也是一個相對長度單位，相對的是html元素的字體大小而言的。

示例：給div設置padding為1rem

<style>
    div{
      padding: 1rem;
      border: 1px solid black;
    }
</style>

在這里插入圖片描述
這里1rem也是默認16px。

接下來，我們設置html的字體大小為20px：

html{
      font-size: 20px;
    }
div{
    padding: 1rem;
    border: 1px solid black;
   }

在這里插入圖片描述
可以看出padding變成了20px

我們可以再給div標簽的文本設置文字大小為28px：

html{
      font-size: 20px;
    }
div{
    padding: 1rem;
    border: 1px solid black;
    font-size: 28px;
   }

在這里插入圖片描述
可以看出，padding仍然是20px，所以rem相對的是html元素的字體大小而言的。

原文鏈接：https://blog.csdn.net/lq313131/article/details/125919714

欄目分類
最近更新