什么是css单位?
1.关于css单位 可以看到css单位由尺寸单位颜色单位组成。
2.在mdn中,css单位做了更为详尽的描述尺寸单位。可以总结为css单位的值有:数值丶百分比丶颜色丶坐标位置丶函数。
一.数值单位:
1.em

em是一种相对单位,它相对于父元素的字体大小。

em常用于存在缩放需求时使用,比如在多行文本段落中,如果行高设置为line-height: 18px,如果文字的大小因为缩放发生改变,行高值是不会随之改变的,一直都是18px,如果将行高设置成一种相对值line-height: 1.2em,那么此时的行高值就会随着字体的大小改变而变化。

因为em是相对于父元素的字体大小,所以该单位存在明显的嵌套层级关系,浏览器默认的字体大小是16px,因此1em = 16px,需要注意的是chrome浏览器能够显示的最小字体是12px,当字体大小设置小于12px字体将按照12px显示。

2.rem

rem(root em)是一种相对单位,和em不同点是rem相对于根元素html的字体大小。

利用这个特性,我们常常使用rem单位进行移动端页面的布局。

rem布局的本质是等比缩放,一般是基于宽度。

最简单设置rem基准值的方法。

    document.addEventListener('DOMContentLoaded', function (e) {
      var rem = window.innerWidth / 10 + 'px';
      document.getElementsByTagName('html')[0].style.fontSize = rem;
    })

使用scss将px转换为rem值

    @function px2rem ($px) {
      $rem: 75px;
      @return ($px / $rem) + rem;
    }
二.百分比:
1.百分比单位
    基于包含块的宽度来计算的属性:margin,padding,width,max-width,min-width,left,right,text-indent.
注意
    1.margin-top,margin-bottom,padding-top和padding-bottom都是基于包含块的width属性来计算的。
    2.text-indent:定义基于父元素宽度的百分比的缩进。当外层不指定宽度时,ie下会基于浏览器宽度。
    基于包含块的高度来计算的属性:top,bottom,height,max-height,min-height

关于包含块(containing block)的概念,不能简单地理解成是父元素。如果是静态定位和相对定位,包含块一般就是其父元素。但是对于绝对定位的元素,包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。对固定定位的元素,它的包含块是视口(viewport

基于当前字体大小来计算的属性:line-height

    background-size还可以取预定义的值:contain,cover,auto。
2.百分比继承

如果某个元素设置了百分比的属性,则后代元素继承的是计算后的值。例如:

    p { font-size: 10px } p { line-height: 120% } / 120% of 'font-size' / 那么p的子元素继承到的值是 line-height: 12px,而不是 line-height: 120%。

关于css中的继承:

样式层叠与继承是样式表中两个关键概念,浏览器会根据层叠和继承规则确定显示一个元素时各种样式属性采用的值。

并非所有的CSS属性都可以继承,这这方面有条经验可以参考:与元素外观(文字,颜色,字体等)相关的样式会被继承;与元素在页面上的布局相关的样式不会继承。此外,还可以使用inherit强行实施继承。