轮播图片，css顺序问题

css调用顺序小记

w3schools等），只说css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”，但对于样式文件中的多个相同样式的优先级怎样排列，没有详细说明。经过测试和继续搜索，得知优先级如下排列：

1. 样式表的元素选择器选择越精确，则其中的样式优先级越高：
   id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式

2. 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高
   注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class（定义项）出现的顺序

3. 如果要让某个样式的优先级变高，可以使用!important来指定：
   .class1
   {
   color: black !important;
   }

4. 书写顺序：
   （1）定位属性：position display float left top right bottom overflow clear z-index

（2）自身属性：width height padding border margin background

（3）文字样式：font-family font-size font-style font-weight font-varient color

（4）文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

（5）css3中新增属性：content box-shadow border-radius transform……

目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能
原理：浏览器的渲染流程为——
1——解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构
2——构建render树：DOM树和CSS树合并之后形成的render树。
3——绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。

扩展：还有一个会影响浏览器渲染性能的词汇“repaint（重绘）”
repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。H₂O is是液体。

CSS渲染机制：

轮播图插入图片

// An highlighted block
<template>
  <el-row class="warp">
    <el-col :span="12" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>商品入驻</el-breadcrumb-item>
        <el-breadcrumb-item>新增商品</el-breadcrumb-item>
      </el-breadcrumb>
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="item in imagesbox" :key="item.id">
           <img :src="item.idView" class="image">
        </el-carousel-item>
      </el-carousel>
    </el-col>
  </el-row>
</template>


<script> 
  export default{
    data(){
      return {
        imagesbox:[{id:0,idView:require("../../assets/images/forest.png")},      {id:1,idView:require("../../assets/images/sunrise.png")},

{id:2,idView:require("../../assets/images/sunshine.png")}]
      }
    },
    methods: {
      
    },
    mounted() {
    }
  }
</script>
<style>
</style>
``