CSS rem、em、px的区别

em 和 rem都是灵活、 可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。

rem

  r是英语单词root的缩写，根元素的意思。网页的根元素元素。

rem是CSS3新增的一个相对单位（root em，根em）。相对于根元素的字体大小。

通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

rem是与根元素有关系的。浏览器都有一个默认字体大小16px。

例：下面给container2单独设置了字体大小16px,可以看出与container1的字体大小一样，我们可以默认根元素html的默认字体大小为16px;

接着我们给html设置font-size为1rem，看效果：

可以看出1rem是等于16px的；

接着分别给container2与container1设置不一样的font-size:

<div class="container container1">
    <div class="item item1">test</div>
    <div class="item item2">test</div>
    <div class="item item3">test</div>
  </div>
  <div class="container container2">
    <div class="item item1">test</div>
    <div class="item item2">test</div>
    <div class="item item3">test</div>
  </div>

//---css
html {
  color: red;
  font-size: 1rem;
}
.container{
  float: left;
  margin-left: 20px;
}
.container1{
  border-right:1px solid black;
}
.container1 .item1{
  font-size: 1rem;
}
.container1 .item2{
  font-size: 2rem;
}
.container1 .item3{
  font-size: 3rem;
}
.container2 .item1{
  font-size: 16px;
}
.container2 .item2{
  font-size: 32px;
}
.container2 .item3{
  font-size: 48px;
}

可以看出：元素的font-size为：根元素字体大小乘以你 rem 值。

例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于父元素，当父元素也没有设置， 就相对于父元素的父元素， 一直到浏览器根元素字体大小。当浏览器根元素没有设置，则使用默认字体尺寸。

EM特点

• 1. em的值并不是固定的；
• 2. em会继承父级元素的字体大小。

当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。

例如，如果一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180。

CSS padding设置为 10em，表示CSS padding 为180px;

注：因为每个元素将自动继承其父元素的字体大小。 继承效果只能被明确的字体单位覆盖，比如px,vw

使用 em 单位的元素字体大小根据它们来定。 但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。 因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。

px

em于rem的区别：

• 都是相对大小， rem相对的只是HTML根元素，而em相对的元素是父元素的字体大小。