html5里面em是什么单位,css单位中em和rem的区别是什么？

css单位中em和rem的区别是什么？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

rem中的r意思是root(根源)，这也就不难理解了。

em

子元素字体大小的em是相对于父元素字体大小

元素的width/height/padding/margin用em的话是相对于该元素的font-size

上代码：

我是父元素div

我是子元素p

我是孙元素span

div {

font-size: 40px;

width: 10em; /* 400px */

height: 10em;

border: solid 1px black;

}

p {

font-size: 0.5em; /* 20px */

width: 10em; /* 200px */

height: 10em;

border: solid 1px red;

}

span {

font-size: 0.5em;

width: 10em;

height: 10em;

border: solid 1px blue;

display: block;

}

结果如下：

rem

rem是全部的长度都相对于根元素，根元素是谁？元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

上代码：(html代码如上，只是把css代码的元素长度单位变了)html {

font-size: 10px;

}

div {

font-size: 4rem; /* 40px */

width: 30rem; /* 300px */

height: 30rem;

border: solid 1px black;

}

p {

font-size: 2rem; /* 20px */

width: 15rem;

height: 15rem;

border: solid 1px red;

}

span {

font-size: 1.5rem;

width: 10rem;

height: 10rem;

border: solid 1px blue;

display: block;

}

更多web前端开发知识，请查阅 HTML中文网 ！！