vue 页面跳转样式错位

最新推荐文章于 2023-03-08 23:38:41 发布

最快乐星球居民

最新推荐文章于 2023-03-08 23:38:41 发布

阅读量571

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43328781/article/details/116170269

版权

Vue 样式错位 scoped CSS隔离组件样式

关键词由CSDN通过智能技术生成

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue页面跳转样式错位但是刷新又好了的情况

解决办法：在页面的style中加上scoped
如下：、

<style lang="less" scoped>
.el-checkbox {
  float: left;
}
.el-row {
  width: 90%;
  margin: auto auto;
  margin-bottom: 20px;
  background-color: white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 10px;
}

当style标签具有该scoped属性时，其CSS将仅应用于当前组件的元素
1.什么是scoped
在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。