VUE style的层叠和优先级规则

一、父元素中的style，可以影响 或 继承 子元素的布局吗？

父元素中的 style 可以通过 继承 或 布局规则 影响子元素的布局，但具体取决于所使用的 CSS 属性。下面是几种常见的方式及其影响：

1. 继承的属性

某些 CSS 属性是可以继承的，子元素会自动继承父元素的这些属性。例如，字体样式 (font-family)、文本颜色 (color) 等。

<div class="parent">
  <div class="child">This is a child element</div>
</div>

<style>
  .parent {
    color: red; /* 文字颜色继承 */
    font-size: 20px; /* 字体大小继承 */
  }
</style>

在这个例子中，.child 元素会自动继承 .parent 的 color 和 font-size 属性，因此文字会显示为红色，字号为 20px，即使子元素没有显式定义这些属性。

2. 不继承的属性

一些属性是不可继承的，比如布局相关的属性（margin、padding、width、height）。这些属性默认情况下不会从父元素继承到子元素，但父元素的布局规则仍然可以影响子元素。

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

<style>
  .parent {
    display: flex; /* 父元素的布局属性影响子元素 */
    justify-content: space-between;
  }
  .child {
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }
</style>

在这个例子中，父元素使用了 flex 布局，虽然子元素没有直接定义 display 属性，但它们的布局会受到父元素 display: flex 的影响，子元素会被均匀分布在父元素中。

3. 定位 (Positioning) 影响

父元素还可以通过定位属性（position）影响子元素的布局。例如，使用 relative、absolute 等定位属性可以直接控制子元素的位置。

<div class="parent">
  <div class="child">Child</div>
</div>

<style>
  .parent {
    position: relative; /* 父元素是相对定位 */
    width: 200px;
    height: 200px;
    background-color: lightgray;
  }
  .child {
    position: absolute; /* 子元素是绝对定位 */
    top: 50px;
    left: 50px;
    background-color: lightblue;
    width: 100px;
    height: 100px;
  }
</style>

在这个例子中，.child 元素使用 position: absolute，它的位置是相对于 .parent 元素的 position: relative 来定位的，父元素的布局属性影响了子元素的位置。

总结

• 可继承属性：如 color、font-family 等会自动影响子元素。
• 布局规则：父元素的布局模式（如 flex、grid 等）会间接影响子元素的布局。
• 定位：父元素的 position 属性可以直接影响子元素的位置。

通过这些机制，父元素的样式可以在不同层面上影响子元素的布局。

二、子元素 使用 与父元素同名的 style 类呢？

在 CSS 中，如果子元素使用了与父元素相同的类名，但样式规则不完全相同，子元素的样式会优先应用其自身的定义，并且会叠加或覆盖从父元素继承的属性。浏览器在渲染时遵循层叠（Cascading）和优先级（Specificity）规则，来决定哪条样式规则最终应用于元素。

<div class="box">
  父元素
  <div class="box">
    子元素
  </div>
</div>

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: lightgray;
    color: black;
  }

  .box .box {
    background-color: lightblue;
    color: white;
  }
</style>

解释：

1. 父元素有一个 class="box"，其样式定义了 width、height、background-color 和 color。
2. 子元素也有相同的 class="box"，但是由于在 CSS 中定义了更具体的选择器 .box .box，即父元素中的 .box 子元素，其背景颜色和文字颜色将被覆盖为 lightblue 和 white。
3. 其余未被覆盖的样式，比如 width 和 height，将继承父元素的定义，因为这些样式在子元素中没有被重新定义。

输出效果：

• 父元素的背景颜色为 lightgray，文字颜色为 black。
• 子元素的背景颜色为 lightblue，文字颜色为 white，但它的 width 和 height 仍然是从父元素继承的 200px。

关键点：

1. 层叠性（Cascading）：CSS 的层叠特性允许相同的样式类在不同的层次应用，但子元素中更具体的样式规则会覆盖父元素的样式。
2. 优先级（Specificity）：更具体的选择器（如 .box .box）优先级高于简单的类选择器 .box，因此子元素的样式会覆盖父元素的部分样式。
3. 继承性（Inheritance）：某些样式（如 color）可以继承自父元素，但如果子元素定义了相同的属性，子元素的定义会优先。