CSS注意事项
选择器尽量少用id
尽量不要用! important因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用
自己的样式加载在引用库样式的后面
CSS继承
大部分具有继承特性的属性跟文本相关:
- font：组合字体
- font-family：规定元素的字体系列
- font-weight：设置字体的粗细
- font-size：设置字体的尺寸
- font-style：定义字体的风格
- text-indent：文本缩进
- text-align：文本水平对齐
- line-height：行高
- color：文本颜色
- visibility：元素可见性
- 光标属性：cursor
常用的css不可继承的属性
- display：规定元素应该生成的框的类型
- text-decoration：规定添加到文本的装饰
- text-shadow：文本阴影效果
- white-space：空白符的处理
- 盒子模型的属性：width、height、margin 、border、padding
- 背景属性：background
- 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
可以使用inherit关键字显式指定一个属性值从其父元素继承
单位
- 绝对长度: px, pt, mm
- 相对长度: em, rem, ex,
- 角度: deg, grad, tum, rad
- 时间: s,ms
- 分辨率: dpi, dpcm, dppx
基础选择器
- ID选择器
- 标签选择器
- 类选择器
- *通用选择器,该选择器匹配所有元素
- 子组合器(>)匹配的目标元素是其他元素的直接后代。如: parent > child.
- 相邻兄弟组合器(+) --匹配的目标元素紧跟在其元素后面。如: ρ+h2.
- 伪类选择器.
- 属性选择器
- 较新的选择器:is() :has（) :where() :not()
层叠上下文
除了 { position: relative | absolute; z-index: auto; }的元素之外，其他元素内部形成新的屈疊上下文 上述对应图中第二层元素 1. positioned && z-indexカauto l0;
2.无z-index但形成新stack context z-index> 0的元素(比如opacity< 1);
内部形成新的层叠上下文:
按z-index大小排列
按html出現順序排列
子元素的z-index无法超越父元素的z-index显示区域
下图引用于层叠上下文 - CSS：层叠样式表 | MDN (mozilla.org) 感觉理解的更详细和形象一点
- 三个兄弟元素div1,div2,div3因为z-index的大小进行排序，进行层叠
- div3中的子元素div4的z-index值为6大于div1的z-index值，但是由于子元素div4的z-index无法超越父元素div3的z-index显示区域，所以div4也是层叠在div1下面
