• 大前提：所有样式的所有属性一定都有值

  • 注：类似 margin border 等仅仅是具体属性的简写（shorthand property），最终使用的是 margin-bottom border-bottom 等「真实」属性；也有一些属性只是另一些属性的别名（alias），具体可参考 properties

• 属性值的来源：默认值 + 浏览器自带的 CSS（user agent stylesheet）+ 用户自定义的 CSS

  • 注：默认值和浏览器自带的 CSS 不是一个东西

    • 默认值是每个属性都会有一个默认值

    • 浏览器自带的 CSS 是一个普通的样式表，可见 html.css

计算过程

1. 确定声明值

   • 依赖「用户自定义的 CSS」和「用户自定义的 CSS」进行计算

   • 对于无冲突的属性（一个属性没有定义多次的），直接使用

   • 对于存在冲突的属性（一个属性在一个或多个地方定义了两次或以上），进行冲突解决

     • 首先判断重要性： !important > 用户自定义的 CSS 声名的 > 浏览器自带的 CSS 声名的

     • 如果仍然有冲突，采用权重计算

       • 简单说就是 id > class > element、更具体的 > 更宽泛的

     • 如果仍然有冲突，根据源代码位置计算，越后面越优先

     • TODO 补充最新的 @layer 规则

2. 对于未确定声明值的，使用继承

   • 必须同时满足：上一步未确定 + 是可继承的属性 + 父元素定义了这个属性

   • 特别强调：只要上一步确定了值，就不会判断继承逻辑

     • 这里隐藏的点：浏览器自带的 CSS 优先级要高于继承自自定义的 CSS

3. 对于仍然未确定值的，使用默认值

   • 再次强调，这里的默认值和浏览器自带的 CSS 不是一个概念