最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面上渲染的元素层级结果和我预想的不一样。根据自己之前的理解，也没找到一个合理的解释。我知道，肯定是我对相关属性…

不知道大家有没有听过 CSS 层叠上下文这个名词，我最近听到这个词的时候，一脸懵逼，压根就没有听说过这个名词。出于好奇心，我就在MDN里查阅了这个名词好好研究了一番，它在MDN里是这样描述的：

网页开发中，我们经常要计算各种距离。 比如 OnBoarding 组件，我们要拿到每一步的高亮元素的位置、宽高： 比如 Popover 组件，需要拿到每个元素的位置，然后确定浮层位置： 比如滚动到页面

JavaScript：JavaScript实现动画效果，DOM元素操作等。 Style（计算样式）：确定每个DOM元素应该应用什么CSS规则。 Layout（布局）：计算每个DOM元素在最终屏幕上显示的大小和位置。由于web页面的元素布局是相对的，所以其中任意一个元素的位置发生…

为什么vue:deep、/deep/、>>>样式能穿透到子组件 在scoped标记的style中，只要涉及三方组件，那deep符号会经常被使用，用来修改外部组件的样式。 不使用deep 要想修改三方组

CSS 动态效果是网页设计中非常关键的一部分，它能够提升用户体验，使网页看起来更加生动和吸引人。两种实现方式是 CSS 过渡（Transition）和 CSS 动画（Animation）。

Vue3 中可以在 style 标签中使用 :deep() 的方法进行样式穿透，主要是解决在使用第三方的 UI 库（如 element-plus 等）导致的时对其样式设置不生效的问题。

过渡效果提供了transition的封装组件，添加过渡动画；通过添加删除css类名来实现。过渡的css类名：默认的前缀是"v-"开头v-enter：定义进入过度的开始状态；v-enter-active

通常，当一个元素的样式属性值发生变化时，我们会立即看到页面元素发生变化，也就是页面元素从旧的属性值立即变成新的属性值的效果。css属性transition能让页面元素不是立即的、而是慢慢的从一种状态变成另外一种状态，从而表现出一种动画过程。 transition-propert…