前端 --- css深入

background：url() no-repeat center center/cover

第一段：url 表示指定图片位置，路径
第二段：no-repeat 表示图片不重复
第三段：表示水平方向上，显示图片的中间，垂直方向上，也显示图片的中央。
第四段：cover，表示自动调整，以覆盖整个块元素区域。

css中第三个重点：

定位：破坏默认文档流规则（块元素独占一行，从上往下排列，内联元素从左往右排，
块元素如果不设置尺寸，则尺寸由内容所决定）。
把一个元素定位在网页中的指定位置（任意位置）

定位：position：

1. 绝对定位：absolute。
   参照物：从当前元素向祖先元素查找，查找到的第一个非static定位的元素，即为其参
   照，如果找不到，则以body为参照。
2. 相对定位：relative。和绝对定位使用方法完全一致。
   参照物：相对于自身未定位（未偏移）之前的位置为参照。
3. 固定定位：fixed。和绝对定位使用方法完全一致。
   参照物：以用户可见视区（viewport）为参照。
4. 静态定位：static，不定位，使用默认文档流规则。默认值。
   由于定位元素不再遵守默认文档流规则，没有默认宽度，需要手动设置。
   一个元素在定位之后，其所占用的空间就会释放。
   层序：z-index。负值，正值皆可，最好整数。int
   定位的每一个元素，都可以设置层序。

---

css的层叠特性，优先级：

1. 不同选择器，选中的相同元素所使用的样式，其效果可以叠加。
2. 对于相同的样式，或相似有冲突的样式，进行叠加的时候，需要考虑优先级。
   css的优先级：参考原则。
3. 离修饰的元素越近，其优先级越高。行内样式>页内样式>外部样式
4. 选择器命中元素的精确度越高，其优先级越高。#id>.cls>标记选择器>*选择器
5. !important > 其它样式。!important可以快速提升优先级，比行内样式还高

关于透明：

1. rgba(r,g,b,a)：a表示alpha通道，0~1的值，1表示完全不透明，0表示完全透明。
2. 元素透明：opacity：值是0~1的值。
3. transparent：纯透明的颜色。凡是可以使用颜色的地方，都可以使用transparent。

css的继承特性：

有一少部分样式可以继承，文本格式化相关的样式可以继承。
font-size font-wegiht font-style color text-align text-decoration
后代元素可以覆盖祖先元素的继承样式。
3个关键字：可以作为任意样式的值。

1. initial：使用浏览器初始值
2. inherit：使用继承下来的值
3. unset：卸载当前样式值，卸载之后，如果有继承下来的值，则使用继承下来的值，否
   则使用浏览器初始值。