1014 CSS 样式扩展

问题: App父组件会覆盖子组件的样式

<!-- 父组件 -->
    <div class="box">灰色</div>
<!-- 子组件 -->
  <div class="box">红色</div>

/* 父组件 */
.box{
  width: 100px;
  height: 100px;
  background-color: #ccc;
}
/* 子组件 */
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

• 效果图

1. 权重值相同的话是按照顺序值去执行的，App 父组件写的样式是最后生效的，所以 Box 子组件写的样式最后被父组件给覆盖了
2. 单页面应用，App 作为最大级别的组件在权重值同级别的情况下会覆盖所有子组件的样式

解决方案

1. 如果样式标签内<style scoped>设置了 scoped ,那么该组件的所有标签都会自动加上一个 data-v-xxx 属性，而且该组件设置的所有样式选择器上都会加上该属性的属性选择器
2. 实现的功能就是组件的私有化
3. 接下来的所有样式一般都会使用 .app为前缀

• 效果图

使用 scoped 会遇到某个问题

1. 安装 element 引入 switch 修改 小圆点测试
2. 给 <el-switch> 里面改 style 只是背景有变化，又复制小球的样式也没有用，但是把 scoped 去掉了就有用了。
3. 因为别人写的组件里面不会有 data-v-xxx 属性，自然而然就失效了。
4. scoped 只会把第三方插件最外层的加上 data-v-xxx 属性，里面的不会。

/* 把 scoped 去掉这个属性就会生效 */
.el-switch__core:after {
  background-color: blue;
}
/*scoped 存在的时候，只有在这个最外层加才有效 */
.el-switch {
  border: 2px solid #000;
}

scss 安装使用

1. Vue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules ——全部都在 <style> 标签内。
2. 使用工具包 sass-loader 把 scss 扩展语言编译成 css 语言。

• Vue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules——全部都在 <style> 标签内。
• scss 语法就是 css 的扩展语法
• 默认我们先安装的 vue 环境是不支持 scss 语法的，需要安装工具
• 需要安装 node.sass 以及 sass-loader 不需要配置的东西，使用依赖--> 开发依赖
• 安装好了工具包之后就可以在组件内使用 scss 语法了

使用

<div class="scss-demo">
  <h3>在 vue 中使用 scss 语法样式</h3>
  <h4>测试插值语句</h4>
</div>

公共样式 public.scss

// 整个项目的公共样式变量   public.scss
$border:1px solid #ccc;

scss 用法

<style lang="scss" scoped>

1. 样式嵌套  &  代表的是当前的标签名   样式表生成也是我们之前的 css 语法。
2. 设置变量  $color:teal;           
3. 运算
4. @if 或者 for
5. 样式的导入 @import   assets 创建 public.scss @import '../assets/public.scss' 
6. 插值语句 定义 $xxx:H3  使用 #{$xxx}

@import "../assets/public.scss";
$color: teal;
$height: 50px;
$nameH3: H3;
$nameH4: H4;
.scss-demo {
  #{$nameH3} {
    color: #000;
    border: $border;
    height: $height + 20px;
  }
  #{$nameH4} {
    color: blue;
    border: $border;
  }
  &:hover h3 {
    @if 5 < 3 {color: red}
    @if 1 + 1 == 2 {color: $color}
  }
}
</style>

less 安装使用

• 需要安装 less-loader 以及 less.scss 基础用法和 scss 一样没区别。

<div class="less-demo"><h3>在 vue 中使用 less 语法写样式</h3></div>

@color:#770fff;
.less-demo{
  h3{
    color:@color;
  }
}

stylus 安装并使用

1. 原先在图形化界面中安装的 stylus 以及 stylus-loader 的 4.1.1 最新版本的，Vue 还未更新。
2. 所以必须使用命令行工具安装 npm i stylus@3 -D 安装之前的 3 版本。
3. 需要安装 stylus stylus-loader 注意 stylus-loader 最近更新了 4 版本但是 VueCli4 能使用 3 版本，所以安装 stylus 的 3 版本才可以。
4. vscode 安装了 vetur 那么 vue 组件内的 style 写 stylus 样式的时候会自动补齐，不想自动补齐， 文件>首选项>设置>搜索stylus>none 关闭格式化
5. 在 <sttle lang='stylus'> 里面保存会自动的格式化。
   • 文件>首选项>设置>搜索 fromat 或者 vetur 再或者 stylus下 Default Formatter: 选中none 。

<style lang="stylus">
.stylus
  h3
   color #ffff00
   font-size 20px
</style>

Flex 布局方式给页面排版布局

1. 哪都能用，不需要下载任何包，跟 float,只是兼容性不好，只支持高版本的浏览器。
2. Flex 在 Vue 中随便用，注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
3. 不要混合式布局

好处:

• flex 是一种弹性盒子布局方式
• 抛弃原来的 float 布局方式
• 设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
• flex 核心 学之前就要搞懂
• 容器：设置了 display:flex; 的元素就是容器
• 容器的轴线:分横向和纵向，默认主轴线是横向
• 项目: display:flex; 的子元素就是项目，项目并不会超出盒子，而且项目按照容器的主轴线排列，项目会自动转化为块元素，项目如果没有设置高度默认和容器的过渡一致，想竖排的就给容器修改轴线 flex-direction:column

<div class="wrap">
  <div class="a"></div>
  <div class="b"></div>
</div>

<style>
/* 如果 .wrap  没有高的话是撑不起来的，如果加了 flex布局的话这些问题就迎刃而解，不会超出，还会等比的缩小放大*/
.wrap {
  width: 200px;
  height: 200px;
  border: 2px solid blue;
  display: flex; /* 定义容器 */
  flex-direction: column;  /* 修改竖轴线 */
}
/* .a,
.b {
  height: 200px;
} */
.a {
  /* width: 80%; */
  height: 80%;
  background-color: #770fff;
}
.b {
  /* width: 40%; */
  height: 40%;
  background-color: #ffff00;
}
</style>

• 去除高 width