css - 单位

ㄑ流年.似ツ水 .

已于 2022-09-11 01:08:01 修改

阅读量53

点赞数

分类专栏： css 文章标签： css css3 html

于 2022-09-02 09:44:17 首次发布

本文链接：https://blog.csdn.net/weixin_43587933/article/details/126656262

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、px

物理像素

pc端页面1px等于1个 物理像素
移动端不尽相同，所以有 物理像素比 或 屏幕像素比 ，也就是1px能显示多少个 物理像素比

二、em

是一个相对单位

子元素字体大小的 em 是相对于父元素字体大小
元素的 width、height、padding、margin 用 em 的话是相对于该元素的 font-size

<style>
  .parent {
    font-size: 40px;
    /* 元素的 `width` 是相对于该元素的 `font-size`, 所以换算为：40 * 10 = 400px */
    width: 10em;
    /* 元素的 `height` 是相对于该元素的 `font-size`, 所以换算为：40 * 10 = 400px */
    height: 10em;
    background-color: red;
  }

  .parent .children {
    /* 子元素字体大小的 `em` 是相对于父元素字体大小, 所以换算为：40 * 0.5 = 20px */
    font-size: 0.5em;
    /* 元素的 `width` 是相对于该元素的 `font-size`, 所以换算为：20 * 10 = 200px */
    width: 10em;
    /* 元素的 `height` 是相对于该元素的 `font-size`, 所以换算为：20 * 10 = 200px */
    height: 10em;
    background-color: blue;
  }
</style>


<div class="parent">
  我是父元素
  <div class="children">我是子元素</div>
</div>

三、rem

是一个相对单位，是 root em 的简写， rem 的基准相对于 html 元素的字体大小，也就是页面的根元素，所以称之为 root rem ，

<style>
  html {
    font-size: 50px;
    line-height: 1;
  }

  .parent {
    /* `rem` 是相对于根元素，换算为：50 * 0.5 = 25px */
    font-size: 0.5rem;
    /* `rem` 是相对于根元素，换算为：50 * 10 = 500px */
    width: 10rem;
    /* `rem` 是相对于根元素，换算为：50 * 10 = 500px */
    height: 10rem;
    background-color: red;
  }

  .parent .children {
    /* `rem` 是相对于根元素，换算为：50 * 0.5 = 25px */
    font-size: 0.5rem;
    /* `rem` 是相对于根元素，换算为：50 * 10 = 500px */
    width: 10rem;
    /* `rem` 是相对于根元素，换算为：50 * 10 = 500px */
    height: 10rem;
    background-color: blue;
  }
</style>

<div class="parent">
  我是父元素
  <div class="children">我是子元素</div>
</div>