CSS 权威指南 读书笔记（四）

第四章 值和单位

---

关键字

---

• 值用一个词来表示，即关键字，这里将要讨论三个全局关键字。

• 全局关键字即所有css属性都能使用的关键字，有 inherit, initial, unset

  • inherit 为继承父元素的样式
  • initial 为初始化该属性到预设的值
  • unset 对于继承属性->继承父元素 对于非继承属性->初始化到预设

p{
  color:inherit;
  background-color:initial;
  font-size:unset;
}

• 还有一个特殊的属性, 仅仅支持这三个全局关键字, 该属性表示除direction和unicode-bidi之外的所有属性。

*{
  all:inherit/initial/unset;
}

URL

---

大家对URL肯定不陌生，但是有一点也许在使用过程中会被大家忽略 ```css { background:url(...) } ``` - 背景图片的声明时候，url与（）之间不能存在空格，反之该声明无效

长度单位

---

类型	名称	说明
绝对长度单位	px 像素
分辨率单位	dpi 点每英寸 dpcm 点每厘米 dppx 点每像素
相对长度单位	em	相对父元素的font-size
	rem	相对根元素的font-size
视区相关单位	vw	视区的宽度/100, 浏览器窗口拉宽等都随之改变
	vh	视区的高度/100
	vmin	视区宽高中最小的/100,937 * 650的视区,即1vmin = 6.5px
	vmax	与上对应

其他

---

• 计算值：p { width : calc(90% - 2em) } ->得到的宽度为 父元素的90%-2em

• 属性值: p { content: “[” attr ( id ) “]” } ->p的内容为[p中的id值],如果p没有id值,则为空

• css变量: 声明以"–"开头,使用时var()包裹,代码如下:

html {
  --base-color:#639;
}
h1{
  color: var(--base-color);
}