css常用知识点

疆~

已于 2023-08-22 10:47:57 修改

阅读量1k

点赞数

分类专栏： Javascript/CSS/HTML 文章标签： css

于 2020-01-15 20:32:30 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/103995689

版权

Javascript/CSS/HTML 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

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：（参考：router-link 样式 - 简书）

设置<router-link>样式

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

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

例3：

参考：【CSS】下划线与文字间距，下划线粗细以及下划线颜色的设置_向着光芒的女孩-CSDN博客_css 下划线和文字的距离

CSS改变图片颜色的100种方法！_大前端-CSDN博客_css改变img标签颜色

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

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

在项目中综合应用如下：

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

来个更实用，好用的方式：强烈推荐！！！！！！！

实用router-link有个好处，即是当重复点击当前路由不会报错，而$router.push()会报错

    <router-link :to="{ path: '/gengDi' }">
      <LjButton
        style="position: fixed; top: 10vh; left: 10vw; z-index: 1"
        @click="currentMenu = 'gengDi'"
        :type="currentMenu == 'gengDi' ? 'primary' : 'default'"
        >耕地非粮农监测</LjButton
      >
    </router-link>
    <router-link :to="{ path: '/gePollution' }">
      <LjButton
        style="position: fixed; top: 10vh; right: 10vw; z-index: 1"
        @click="currentMenu = 'gePollution'"
        :type="currentMenu == 'gePollution' ? 'primary' : 'default'"
        >镉污染监测</LjButton
      >
    </router-link>



  data() {
    return {
      currentMenu: this.$route.name,
    };
  },

例4：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>

例5.块级元素和行内元素

标签分为两种等级：

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

方式2：推荐

网上说由于vue中没有hover事件，但可以用@mouseenter和@mouseleave事件来代替

另外，经过测试了，将svg换成png也是可以的

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

例7

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

代码如下：

<!--about-->
<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>

效果图如下：

例8

<!--menu-->
<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

参考这里面如何封装的：Vue CLI 3+tinymce 5富文本编辑器整合 – LB

<!--ModuleContainer-->
<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: {},
  props: {
    title: {
      type: String,
      default: "title",
    },
    isVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isShow: this.isVisible,
    };
  },

  created() {},
  mounted() {},
  computed: {},
  methods: {},
};
</script>
 
<style lang="scss" scoped>
.ModuleContainer {
  margin-top: 10px;
  font-size: 17px;
  .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: 80px;
    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实现任意元素居中

效果图：

例11：

      <div style="width: 100px; border: 1px solid red">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item, index) in 10" :key="index">
            <div style="margin-bottom: 10px">
              {{ item }}
            </div>
          </el-col>
        </el-row>
      </div>

【强烈推荐！！！！】

        <div
            style="display: grid;grid-template-columns: repeat(4,1fr);gap: 10px;width: 400px;border: 1px solid orange;">
            <div style="border: 1px solid red;height: 50px;">11111111111111111111111111
            </div>
            <div style="border: 1px solid red;">
            </div>
            <div style="border: 1px solid red;">
            </div>
            <div style="border: 1px solid red;">
            </div>
            <div style="border: 1px solid red;height: 30px;">
            </div>
            <div style="border: 1px solid red;">
            </div>
            <div style="border: 1px solid red;">
            </div>
        </div>

注意：如果有很多el-button进行格网排列，一定要在每个el-button外面再包一层div ，否则排列很可能对不齐！！！

例11_2:【推荐】

    <el-row :gutter="20">
      <el-col :span="6" :xs="12" v-for="(item, index) in 8" :key="index">
        <el-card class="box-card" style="margin-bottom: 10px">
          {{ item }}
        </el-card>
      </el-col>
    </el-row>

如果其中某个el-card高度和其他高度不一样，可能会出现以下排版不好看的情况：

解决办法：

  .el-row {
    display: flex;
    flex-wrap: wrap;
    .el-col {
      margin-bottom: 10px;
      .el-card {
        height: 100%;
      }
    }
  }

例12：

更详尽参考：实现导航栏下拉菜单（带下拉三级菜单）_导航栏下拉框_疆~的博客-CSDN博客【代码】实现导航栏下拉菜单（带下拉三级菜单）https://blog.csdn.net/qq_40323256/article/details/127466894 vue顶部菜单栏积累_疆~的博客-CSDN博客参考：Elementui中El-menu导航栏_~疆的博客-CSDN博客_element 导航栏https://blog.csdn.net/qq_40323256/article/details/125212606 效果图2：https://blog.csdn.net/qq_40323256/article/details/125324396

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

例13：

文字自动换行：

word-break: break-all;

例14：

文字按钮（点击后隐藏按钮中的闪动光标）

caret-color: transparent;

例15：

div奇偶页样式

      <div class="jo">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
      </div>

  .jo {
    border: 1px solid white;
    font-size: 20px;
    color: white;
    width: 400px;
    text-align: center;
    div {
      line-height: 30px;
      &:nth-child(even) {
        background: rgba(11, 216, 216, 0.452);
      }
      &:nth-child(odd) {
        background: rgba(18, 96, 197, 0.445);
      }
    }
  }

CSS 中的:not选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <span>a</span>
    <span class="b">b</span>
    <span>c</span>

</body>
<style>
    span:not(.b) {
        color: red
    }
</style>

</html>

图片垂直居中

方式一：

    <div style="background-color: green">
      <div style="height: 110px; display: flex; align-items: center">
        <img src="https://lj-common.oss-cn-chengdu.aliyuncs.com/lj.png" />
      </div>
    </div>

方式二：

    <div style="background-color: orange">
      <div style="position: relative; height: 110px">
        <img
          src="https://lj-common.oss-cn-chengdu.aliyuncs.com/lj.png"
          style="position: absolute; top: 50%; transform: translate(0, -50%)"
        />
      </div>
    </div>

首行缩进2字符

text-indent: 2em;

两端对齐

效果一：

text-align: justify;

效果二：

行内元素两端对齐：（要指定宽度）

      text-align: justify;
      text-align-last: justify;
      width: 90px;

<template>
  <div class="main">
    <p><strong>名称：</strong><span>成都xxxx公司</span></p>
    <p>
      <strong>地址：</strong><span>成都市xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx号</span>
    </p>
    <p><strong>客服电话：</strong><span>2333333333</span></p>
    <p><strong>E-MAIL：</strong><span>test@bbbbbbb.cn</span></p>
  </div>
</template>
<style lang="scss" scoped>
.main {
  color: black;
  p {
    display: flex;
    strong {
      text-align: justify;
      text-align-last: justify;
      width: 90px;
      border: 1px solid green;
    }
    span {
      width: 300px;
      border: 1px solid orange;
    }
  }
}
</style>

或者用table,tr,td标签实现

代码控制样式显示隐藏

<template>
  <el-button
    @click="isHide = !isHide"
    style="border: 1px solid red; cursor: pointer"
    >{{ isHide ? "显示" : "隐藏" }}右边框</el-button
  >
  <div class="test" :class="{ hide: isHide == true }">test</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const isHide = ref<boolean>(true);
</script>
<style lang="scss" scoped>
.test {
  border: 1px solid red;
  width: 150px;
  height: 150px;
  &.hide {
    border-right: 0;
  }
}
</style>

消除el-image图片周围间隙

添加样式display: block即可。注意是block，不是inline-block，用inline-block是不生效的

display: block

代码实现三角形

            .we-select__selected--icon_content {
                width: 0;
                height: 0;
                position: relative;
                border-style: solid;
                border-width: 5px 4px 1px;
                border-color: gray transparent transparent;
            }

如果想翻转180度，只需再加上以下属性即可