css常用知识点

a标签中有四个： 

link、visited、hover、active 

未移入a标签链接时：link 

移入a标签链接时：link、hover 

点击a标签链接时：link、hober、active 

点击后未移入a标签连接时：link、visited 

点击后移入a标签连接时：link、visited、hover 

点击后再次点击a标签连接时：link、visited、hover、active 

取消下划线：

a{text-decoration: none;}

例1：

HTML：

 <ul>
        <li>主页</li>
        <li>解决方案</li>
        <li>技术选型</li>
        <li>团队成员</li>
        <li>联系我们</li>
      </ul>

CSS： 

 ul {
      list-style: none;
      li {
        float: left;
        height: 55px;
        background-color: yellow;
      }
      li:hover {
        background-color: blue;
      }
    }

例2：（参考：https://www.jianshu.com/p/9fa31bd8e164）

设置<router-link>样式

有时候我们要让激活 class 应用在外层元素，而不是 <a> 标签本身，那么可以用 <router-link> 渲染外层元素，包裹着内层的原生 <a> 标签：

 

在这种情况下，<a> 将作为真实的链接 (它会获得正确的 href 的)，而 "激活时的CSS类名" 则设置到外层的 <li>。

例3：head,view,foot的弹性布局

以下代码可实现：

1：一键回到页面顶部（三行代码即可实现）

2：head和foot组件始终在页面的两端。当页面很长时，会出现滚动条；（overflow: auto;height: 100vh;）

当页面很短时，view部分会填充垂直方向的空白部分，以保证foot组件始终在页面底端（其主要代码为flex：auto）

<template>
  <div class="mainHome">
    <!-- 一键返回页面顶部。注意：target指向要滚动的页面div -->
    <el-backtop target=".mainHome">
      <i class="el-icon-caret-top"></i>
    </el-backtop>
    <vMainHead class="head"></vMainHead>
    <vMainCatalog></vMainCatalog>
    <div class="view">
      <router-view></router-view>
    </div>
    <vMainFoot class="foot"></vMainFoot>
  </div>
</template>

<script>
import vMainHead from "./mainHead";
import vMainFoot from "./mainFoot";
import vMainCatalog from "./mainCatalog";
export default {
  components: { vMainHead, vMainFoot, vMainCatalog }
};
</script>

<style scoped lang="scss">
.mainHome {
  overflow: auto;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  .head {
    flex: 0 0 200px;
  }
  .view {
    flex: auto;
  }
  .foot {
    flex: 0 0 100px;
  }
}
</style>

块级元素和行内元素

标签分为两种等级：

　　1，行内元素。2，块级元素。

行内元素和块级元素的区别：

行内元素：　　

• 与其他行内元素并排
• 不能设置宽高，默认的宽度就是文字的宽度

块级元素：

• 霸占一行，不能与其他任何元素并列。
• 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。

解释一下display的几个常用的属性值，inline ， block， inline-block

• inline:
  1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
  2. 不能更改元素的height，width的值，大小由内容撑开. 
  3. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.
• block:
  1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
  2. 能够改变元素的height，width的值. 
  3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
•  inline-block:
  1. 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
  2. 用通俗的话讲，就是不独占一行的块级元素

鼠标悬浮在图片上时切换另一张图片，效果如下：

代码:

html:

<router-link :to="{ name: 'dataManage' }">
						<div class="dataManage" style="width: 250px;height: 280px;background-repeat: no-repeat;background-size: cover;"></div>
					</router-link>

css: （特别注意：‘.dataManage’和'：hover'的中间是没有空格的！！！如果有空格，那么hover会失效）

.dataManage {
			  background: url(~@/assets/img/index/dataSource_white.png);
			}
.dataManage:hover {
			  background: url(~@/assets/img/index/dataSource_green.png);
                cursor: pointer;
			}

element-UI中去掉圆角（切记：<style>标签中一定要去掉scoped！！！否则效果失效）

.el-input__inner,
    .el-checkbox__inner,
    .el-textarea__inner,
    .el-button {
      border-radius: 0;
    }