相对单位 -- CSS基础回顾（二）

---

相对单位

绝对长度单位：px像素，in英寸，pt点。不同尺寸显示器的出现，导致无法使网站基于宽度设计。必须通过响应式设计实现
em：
相对长度单位，适合基于特定的字号排版

.padded{
	font-size:16px;
	padding: 1em;
}
// 内边距的值为 16px * 1 = 16px
// 大多浏览器的默认字号为16px

.slogan{
	font-size:1em;
	//16px*1em
}
//slogan的font-size的值取决于继承于父元素的字号

em指定多重嵌套的元素的字号时，会因为继承的关系，导致文字逐渐变小

可用后代选择器解决。
rem：
rem是root em的缩写，相对于根元素的单位

:root {                      //root伪类等价于类型选择器html
  font-size: 1em;       	 //使用浏览器的默认字号（16px）
}                          

ul {                        
  font-size: .8rem;
  // 16px * 0.8 = 12.8px
}

一般用rem设置字号，用px设置边框，用em设置其他大部分属性。

视口的相对单位

视口：
网页可见部分的边框区域。不包括浏览器的地址栏、工具栏、状态栏。

vh：视口高度的1/100。
vw：视口宽度的1/100。
vmin：视口宽、高中较小的一方的1/100
vmax：视口宽、高中较大的一方的1/100

vw可以设置字号，当视口改变时，元素大小也会改变，但其改变会过大，可以通过calc（）函数缓和

:root {
  font-size: calc(0.5em + 1vw);
}

无单位的数值

line-height、z-index、font-weight允许无单位的值
当元素的值定义为长度时，子元素会继承它的计算值。当使用em等单位定义行高时，它们的值是计算值，传递到了任何继承子元素上。若子元素有不同的字号且继承了行高属性，可能造成文字重叠

body {            //后代元素继承了计算值（19.2px）
  line-height: 1.2em;  
}                          

.about-us {
  font-size: 2em;   //计算值为32px
}

当使用无单位的数值时，继承的是声明值，即在每个继承子元素上重新计算计算值

自定义属性

CSS变量，层叠变量的自定义属性，变量名前加- - 用于与css的区分

:root {
  --main-font: Helvetica, Arial, sans-serif;
}

p {                //将段落的字体设置为Helvetica、Arial、sans-serif
  font-family: var(--main-font,sans-serif); //第二个声明指定备用值
}

可在不同选择器中重新定义变量，也可通过js实时访问修改其属性值