在css中单元长度用的最多的是px、em、rem，这三个的区别是：
1.px是固定的像素，一旦设置了就无法由于顺应页面巨细而改变。
2.em和rem相对于px更具有机动性，他们是相对长度单元，长度不是定死了的，更实用于相应式结构。
3.em是相对于其父元向来设置字体巨细的，一样平常都是以<body>的“font-size为准。如许就会存在一个标题，举行任何元素设置，都有大概必要知道他父元素的巨细。但是Rem是相对于根元素<html>，就是说我们只必要在根元素确定一个参考值。
4.像素（px）：用于元素的边框或定位。
5.em/rem：用于做相应式页面，最好利用rem，由于em差别元素的参照物不一样（都是该元素父元素），所以在盘算的时间不方便，相比之下rem就只有一个参照物（html元素）
- 子元素字体巨细的em是相对于父元素字体巨细
- 元素width/height/padding/margin用em的话是相对于该元素的font-size
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { font-size: 40px; width: 7.5em; /* 这个为300px，由于是相当于上面的font-size */ height: 7.5em; border: solid 2px rgb(9, 235, 171); } p { font-size: 0.5em; /* 这里为20px，如果是1em就是40px */ width: 7.5em; /* 150px */ height: 7.5em; border: solid 2px skyblue ; color: skyblue; }span { font-size: 0.5em; width: 7em; height: 6em; border: solid 1px pink; display: block; color: pink; } </style></head><body> <div> 父亲 <p> 儿子 <span>孙子</span> </p> </div></body></html>
2.关于rem
- rem是相对于<html>元素。一样平常都是给html元素设置一个字体巨细，然后其他元素的长度单元就为rem。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html { font-size: 10px;/* 下面rem的值都是相对于这个来设置的，如果这里html的值改动，下面所设置的rem的全部也会跟着有影响*/ } div { font-size: 4rem; /* 40px */ width: 20rem; /* 200px */ height: 20rem; border: solid 2px rgb(40, 238, 50); } p { font-size: 2rem; /* 20px */ width: 10rem; height: 10rem; border: solid 1px rgb(66, 192, 238); color:rgb(24, 207, 240) ; } span { font-size: 1.5rem; width: 7rem; height: 6rem; border: solid 2px rgb(248, 112, 27); display: block; color: rgb(235, 112, 24); } </style></head><body> <div> 父亲 <p> 儿子 <span>孙子</span> </p> </div></body></html> |
