• 最好的做法是将高度设置在最接近实际渲染部分的元素上，也就是最接近最终渲染结果的那个容器。

  确保布局更为稳定，避免由于中間層元素沒有明确高度或条件渲染等情况而导致父容器高度计算的错误。

• 布局相关属性（如 type="flex" 和 justify）会直接影响子组件的位置和排列方式。

如果 el-card 等组件的样式影响过大，可以使用 CSS 的all: unset; 或 all: initial;，在特定区域重置样式。

假设在 el-card 中嵌套了一个子组件：

• 父组件

<template>
  <el-card>
    <ChildComponent />
  </el-card>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

• 子组件

<template>
  <div class="child-container">
    <p>这是子组件内容</p>
  </div>
</template>

<style scoped>
.child-container {
  all: unset; /* 确保继承的样式被清空 */
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

通过这些方法，可以有效地减少 el 组件对子组件样式的影响，同时保持页面的一致性和样式的独立性。

它会将元素的所有样式（包括继承样式和非继承样式）恢复到初始状态。也就是说，所有的字体、颜色、背景、边框、间距等都会被清除，元素的显示行为会受到影响，直到重新设置样式。 使用场景：适合当你想完全重置某个元素的样式，防止它被父元素或外部样式所干扰时使用。

• 小结：

如果你希望对子组件进行较为彻底的样式隔离，all: unset; 是一种非常有效的方式。

它也会清除掉很多默认的样式，所以如果有需要的默认样式，可以手动补充回来。