css常用知识点

向右看齐 2021-08-19 20:31 626阅读 0赞

**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： ##

![20200115203009209.gif][]

HTML：

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][https_www.jianshu.com_p_9fa31bd8e164]） ##

设置<router-link>样式

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

![20200116140653367.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

![20200116140604600.gif][]

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

## 例3： ##

参考：[https://blog.csdn.net/ann295258232/article/details/52691369][https_blog.csdn.net_ann295258232_article_details_52691369]

[https://blog.csdn.net/llll789789/article/details/97390485][https_blog.csdn.net_llll789789_article_details_97390485]

![20200217123950698.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

这个是通过a标签实现的，下面来一个span标签实现：

![20210319092256598.gif][]

<template>
      <div class="test">
        <span
          v-for="(item, index) in items"
          :key="index"
          :class="{ active: currentItem === item.name }"
          @click="currentItem = item.name"
        >
          {
       { item.name }}
        </span>
      </div>
    </template>
    <script>
    export default {
      name: "",
      components: {},
      data() {
        return {
          currentItem: "首页",
          items: [{ name: "首页" }, { name: "列表" }, { name: "详情" }],
        };
      },
    };
    </script>
    <style lang="scss" scoped>
    .test {
      font-size: 15px;
      .active {
        color: #f00;
      }
      span {
        padding: 5px 10px;
        border: 1px solid blue;
        &:hover {
          color: red;
          cursor: pointer;
        }
      }
    }
    </style>

在项目中综合应用如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

<template>
      <div>
            <div>
              <span
                v-for="(item, index) in menus"
                :key="index"
                @click="setActiveItem(item.itemname)"
                class="menu"
                :class="{ menuActive: currentMenu === item.itemname }"
              >
                {
       { item.title }}
              </span>
            </div>
    
            <div>
              <router-view></router-view>
            </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          currentMenu: "",
          menus: [
            {
              title: "菜单1",
              itemname: "menu1",
            },
            {
              title: "菜单2",
              itemname: "menu2",
            },
            {
              title: "菜单3",
              itemname: "menu3",
            }
          ],
        };
      },
      mounted() {
        this.currentMenu = this.$route.name;
      },
      methods: {
        setActiveItem(itemname) {
          this.currentMenu = itemname;
          this.$router.push({ name: itemname });
        },
      }
    };
    </script>
    
    <style lang="scss">
        .menu{
            cursor: pointer;
            &:hover {
                color:#1DCBF3;
            }
        }
        .menuActive {
            color:#1DCBF3;
        }
    </style>

## 例4：head,view,foot的弹性布局 ##

以下代码可实现：

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

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

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

<template>
      <div class="mainHome">
        
        <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>

# 例5.[块级元素和行内元素][Link 1] #

## 标签分为两种等级： ##

### 　　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.  用通俗的话讲，**就是不独占一行的块级元素**

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

![20200203215408556.gif][]

代码:

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;
        }

注意：

1，在使用overflow: auto;属性时，记得一定要给当前div添加高度，如： height: 100vh;

2，在使用**height: calc(100vh - 40px);**时，减号两边必须要有空格！

# 例6 ：after ，：before #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]![20200331225419653.gif][]

# 例7 #

实现顶部导航栏弹性伸缩，并且可以调整激活样式

代码如下：

<template>
      <div class="about">
        <div class="content">
          <el-menu :default-active="activeIndex" class="el-menu-demo test" mode="horizontal">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <span @click="test()">我的工作台</span>
              </template>
              <el-menu-item index="2-1" @click="test()">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3">处理中心</el-menu-item>
            <el-menu-item index="4">处理中心</el-menu-item>
          </el-menu>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {
          activeIndex: "1"
        };
      },
      created() {},
      mounted() {},
      computed: {},
      methods: {
        test() {
          console.log("asdf");
        }
      }
    };
    </script>
    
    <style lang="scss">
    .about {
      width: 100%;
      height: 100vh;
      background-color: beige;
      .content {
        height: 300px;
        background-color: yellowgreen;
        .test {
          display: flex;
          justify-content: space-between;
          .is-active {
            border-bottom-color: red;
          }
          .el-submenu__title {
            border-bottom-color: red;
          }
        }
      }
    }
    </style>

效果图如下：

![20200710144702143.gif][]

# 例8 #

![20200906193655554.gif][]

<template>
      <div class="menu">
        <div class="btn_collapse" @click="isCollapse=!isCollapse">
          <i :class="isCollapse?'el-icon-s-fold':'el-icon-s-unfold'" />
        </div>
    
        <el-menu
          default-active="3-2-1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">1</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">2</span>
            </template>
            <el-menu-item index="2-1">2-1</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">3</span>
            </template>
            <el-menu-item index="3-1">
              <i class="el-icon-menu"></i>
              <span slot="title">3-1</span>
            </el-menu-item>
            <el-submenu index="3-2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">3-2</span>
              </template>
              <el-menu-item index="3-2-1">3-2-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {
          isCollapse: true
        };
      },
      created() {},
      mounted() {
        console.log("asdf1");
      },
      computed: {},
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    .menu {
      .btn_collapse {
        width: 60px;
        height: 30px;
        border: 1px solid white;
        font-size: 30px;
        text-align: center;
        color: white;
        margin-bottom: 10px;
        &:hover {
          color: rgb(255, 174, 0);
          border: 1px solid rgb(255, 174, 0);
          cursor: pointer;
        }
      }
      .el-menu {
        border-right: 0;
      }
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
      }
    }
    </style>

# 例9 #

![20200906235438532.gif][]

参考这里面如何封装的：[https://liubing.me/vue-tinymce-5.html][https_liubing.me_vue-tinymce-5.html]

![20200906235241722.png][]![20200906235305802.png][]

<template>
      <div class="moduleContainer">
        <div class="box_show" v-if="isShow">
          <div class="head">
            <span class="title">{
       {title}}</span>
            <span class="btn_close" @click="isShow=false">x</span>
          </div>
          <div class="content">
            <slot></slot>
          </div>
        </div>
        <div class="box_hidden" @click="isShow=true" v-else>{
       {title}}</div>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {
          isShow: false
        };
      },
      props: {
        title: {
          type: String,
          default: "title"
        }
      },
      created() {},
      mounted() {},
      computed: {},
      methods: {}
    };
    </script>
    
    <style lang="scss" scoped>
    .moduleContainer {
      margin-top: 10px;
      .box_show {
        width: 30vw;
        background-color: rgba(41, 41, 41, 0.589);
        color: white;
        display: flex;
        flex-flow: column nowrap;
        padding: 10px;
        .head {
          padding: 7px;
          border-left: 5px solid rgb(255, 115, 0);
          background-color: rgba(27, 27, 27, 0.651);
          .title {
          }
          .btn_close {
            float: right;
            padding-right: 10px;
            &:hover {
              cursor: pointer;
              color: rgb(255, 115, 0);
            }
          }
        }
        .content {
          flex: auto;
          padding: 10px;
        }
      }
      .box_hidden {
        width: 60px;
        height: 30px;
        border: 1px solid white;
        line-height: 30px;
        text-align: center;
        color: white;
        margin-bottom: 10px;
        border-radius: 5px;
    
        &:hover {
          color: rgb(255, 174, 0);
          border: 1px solid rgb(255, 174, 0);
          cursor: pointer;
        }
      }
    }
    </style>

例10：

使用css的position和transform实现任意元素居中

![20200921154012770.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]

## 例11： ##

![20210311011147304.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7][]

## 例12： ##

![20210325232045215.gif][]

<template>
      <div class="head">
        <div class="menuItem">
          <span>首页</span>
        </div>
        <div class="menuItem">
          <span>
            前端框架
            <i class="el-icon-arrow-down"></i>
          </span>
    
          <ul>
            <li>
              <a>Vue</a>
            </li>
            <li>
              <a>react</a>
            </li>
            <li>
              <a>angular</a>
            </li>
          </ul>
        </div>
        <div class="menuItem">
          <span>数据库</span>
          <ul>
            <li>
              <a>MongoDB</a>
            </li>
            <li>
              <a>MySQL</a>
            </li>
          </ul>
        </div>
      </div>
    </template>
    
    <style lang="scss" scoped>
    $head_padding_top_bottom: 30px;
    .head {
      background-color: rgba(0, 0, 0, 0.425);
      text-align: center;
      ul {
        height: 0;
        overflow: hidden;
        position: absolute;
      }
      .menuItem {
        display: inline-block;
        padding: $head_padding_top_bottom 40px;
        cursor: pointer;
    
        span {
          &:hover {
            padding-bottom: 5px;
            border-bottom: 2px solid white;
          }
        }
        &:hover {
          ul {
            height: auto;
            width: 200px;
            padding-top: $head_padding_top_bottom;
            li {
              width: 100%;
              text-align: left;
    
              a {
                line-height: 40px;
                background-color: #0000008a;
                color: #bcd5e2;
                display: block;
                font-size: 16px;
                padding: 5px 20px;
                text-decoration: none;
                cursor: pointer;
                &:hover {
                  background-color: #080808c5;
                  color: white;
                }
              }
            }
          }
        }
      }
    }
    </style>

[20200115203009209.gif]: /images/20210725/5d52642d22c24c5d8f0b38e860ffd809.png
[https_www.jianshu.com_p_9fa31bd8e164]: https://www.jianshu.com/p/9fa31bd8e164
[20200116140653367.png]: /images/20210725/c69310ab45fe45b8b4a600128097dd08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/214f2890d1f24fea90b5ae64aae6c543.png
[20200116140604600.gif]: /images/20210725/9e671594cf534087af3a549d2e87079e.png
[https_blog.csdn.net_ann295258232_article_details_52691369]: https://blog.csdn.net/ann295258232/article/details/52691369
[https_blog.csdn.net_llll789789_article_details_97390485]: https://blog.csdn.net/llll789789/article/details/97390485
[20200217123950698.gif]: /images/20210725/719306b11a6e468bacef9bb4bfa18e09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/ef0148c4af23435984df63fb7adb217a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/75497185127842f49c072f4a331c2b0e.png
[20210319092256598.gif]: /images/20210725/95b69a8ced5d4a7ea4b3e036f2c2147c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/304359cdf6e74823ad63acfe243c593e.png
[Link 1]: https://www.cnblogs.com/stfei/p/9084915.html
[20200203215408556.gif]: /images/20210725/0eaa0aad08724ea6a535e0e9282585c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200331225311859.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20200331225419653.gif]: /images/20210725/cdf4a567b12145d49be1e3cc8621cdd0.png
[20200710144702143.gif]: /images/20210725/f2daeb9d56104d3db22c83909c2c0df6.png
[20200906193655554.gif]: /images/20210725/6cc0ef652b344091b04b9627292c602b.png
[20200906235438532.gif]: /images/20210725/cff278d46c074c93bee492329e676684.png
[https_liubing.me_vue-tinymce-5.html]: https://liubing.me/vue-tinymce-5.html
[20200906235241722.png]: https://img-blog.csdnimg.cn/20200906235241722.png
[20200906235305802.png]: /images/20210725/404fab8cedbd4a2c954008e71986f69d.png
[20200921154012770.png]: /images/20210725/7d2a2fc451854117b455ca8459a90631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: /images/20210725/ff128fb768e744bdbf1b91266160966a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: /images/20210725/5be656d902b1487382ff361c7700f783.png
[20210311011147304.png]: /images/20210725/28e70dad0559406aa2a302d7bc05acd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7]: /images/20210725/93efbdc522174a3c9b1789dd6a746624.png
[20210325232045215.gif]: /images/20210725/2c8151f93f8c4448953528a110782e53.png