Web第六周作业：css单位

px：像素，它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位，是不能变动的。

例：

.content {
height: 150px;
}

em：1em 等于当前的字体尺寸，2em 等于当前字体尺寸的两倍。

浏览器中的文本一般默认为16px，也就是说，默认的情况下：1em=16px。

在css中，如果一个元素没有设置font-size，那么它的front-size值就是它的父元素的font-size。

缺点：在不设置元素font-size的情况下，em总是根据父元素的font-size来确定长度；即使元素设置了font-size，多次嵌套使用em也往往会造成疏忽，不仅使用前需要大量计算，而且不能保证没有漏网之鱼。这将是一个繁杂而低效率的工作。

rem：它是描述相对于当前根元素字体尺寸，除了描述对象与em不同其余都和em一样。

         当em出现多重继承的时候，字体的大小控制就会变得很麻烦，rem的出现就是为了克服这一缺点。

rem与em的区别：

html：

<div class="parents">
　　<div class="em-demo">设置长度为5em demo</div>
　　<div class="rem-demo">设置长度为5rem demo</div>
</div>

css：

从图上我们可以看出：设置5em的div的第一行字符刚好为5个字符大小，它是相对于当前元素字体的尺寸， 宽度占用90px，5 X 18 = 90px。设置5rem的div第一行字符要小一些，它是相对于根元素字体大小（默认为浏览器大小16px），比18px要小一些，宽度占用80px，5 X 16 = 80px。

fr：一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

例：

　　.grid{

　　　display: grid;

　　　grid-template-columns: repeat(4, 1fr);

　　　grid-column-gap: 10px;

}

Web第六周作业：css单位

原文：https://www.cnblogs.com/Styleshah/p/9783707.html