疯狂css

不吃香菜的蟹老板
59 阅读5分钟
1、滚动条问题
<!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>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }
      * {
        box-sizing: border-box;
      }
      .top {
        height: 60px;
        border: 1px solid #ccc;
      }
      .wrap {
        height: calc(100% - 60px);
        overflow: auto;
      } 
      //内容盒子，一般是放数据内容的盒子
      .box {
        height: 1000px;
        border: 1px solid #ddd;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div class="top"></div>
    <div class="wrap">
      <div class="box"></div>
    </div>
  </body>
</html>
​
// 注意**如果内容外面还有父级盒子 要设置高度100%
2、滚动条样式重写
*::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
}
 
*::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    padding-right: 2px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

在mian文件中引入less文件全局重置滚动条

3、图片路径问题
// 1、使用背景图片 css中
<style>
    .box{
        background: url("~@/assets/img/footer.jpg") no-repeat;  //使用 ~@XXXXX 这样改变.vue文件文件夹也不怕图片路径有问题了!
    }
</style>
​
// 2、在vue的src属性中使用，有条件判断的时候 :src="require('XXXXXX')"  
<template>
 <img :src="userInfo.pic ? HOST + userInfo.pic : require('@/assets/img/accountCenter/userAvator.png')" alt="" />
</template>
4、点击某个div区域外面，隐藏这个div
// js部分
 watch: {
    isShowSpace(val) {
      val ? document.addEventListener('mousedown', this.onbourfun) : document.removeEventListener('mousedown', this.onbourfun)
    },
  },
 onbourfun(e) {
      if (!e.path.includes(document.querySelector('.menuSpaceChoice'))) this.isShowSpace = false
    },
 // html部分
 <div class="menuSpaceChoice" v-if="isShowSpace"></div>

4.1 点击某个组件外面，就隐藏这个组件（vue3.0查看源码）

  1. 在mounted时候添加 click事件，在unmounted的时候将事件删除
  2. 拿到 组件的DOM元素从而判断，点击的内容是否被这个元素包含
*5、布局问题：固定列宽，根据容器的宽度来改变列的数量--Grid布局

每项右边距间隔20px，怎么将每一行的最后一个box的margin去除呢？？？

a. 可以使用grid布局，自行解决最后的边距；但是ie10以下不支持repeat()函数，有兼容问题。

 <div class="type2" v-for="(row,index) in list" :key="index">
     <!-- content-box 循环的子项 -->
      <div class="content-box"  v-for>
        <div class="left">
          <img :src="row.logoIoc" alt="" />
        </div>
        <div class="right">
          <h3>{{ row.title }}</h3>
          <p>文本内容文本内容文本内容文本容文本内容文</p>
        </div>
      </div>
  </div>
​
<style lang='scss' >
.type2 {
      display: grid;
      justify-content: space-between;
      grid-template-columns: repeat(auto-fill, 246px);
      // grid-gap: 12px;
      margin-bottom: 8px;
​
      // 内容小盒子
      .content-box {
        margin-right: 12px;
        margin-bottom: 8px;
        width: 246px;
        height: 82px;
        background: #ffffff;
        cursor: pointer;
    }
 }
</style>

b. 使用足够的空白标签进行填充占位，具体的占位数量由最多列数的个数决定的，例如这个布局最多7列，那我们可以使用7个空白标签进行填充占位；

实现的关键就是占位的元素宽度和margin大小设置得和.list列表元素一样即可，其他样式都不需要写，由于元素高度为0，因此，并不会影响垂直方向上的布局呈现。

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <i></i><i></i><i></i><i></i><i></i>
</div>
 
<style>
.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-right: -10px;
}
.list {
    width: 100px; height:100px;
    background-color: skyblue;
    margin: 15px 10px 0 0;
}
/* 和列表一样的宽度和margin值 */
.container > i {
    width: 100px;
    margin-right: 10px;
}
</style>

blog.csdn.net/JackieDYH/a…

6、单行文本

单行文字溢出显示省略号效果

p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

在flex弹性盒子布局的时候，这个效果 无效-盒子根据内容宽度自动会撑开盒子 所以要在p 的父级 加上width:100px 。 或者加flex:1;width:0;自动计算剩余宽度

** flex布局，写宽高都生效，对a也是哦。

7、底层透明，内容是实体; (参考权益扫码那个弹框)

思路：底层盒子设置宽高为0，相对定位；内容区域设置绝对定位。

/deep/ .el-dialog__header {
  display: none;
}
​
/deep/ .el-dialog {
  width: 0;
  height: 0;
  position: relative;
  left: -11%;
  opacity: 1;
}
​
.inner-content {
  position: absolute;
  width: 285px;
  height: 483px;
  background-image: url('~@/assets/img/accountCenter/menber-bg.png');
  background-size: cover;
}

8、ul > li横向排列，实现左右滑动

// html部分:用一个容器top包裹住ul
<div class="top">
      <ul>
        <li>特惠版</li>
        <li>特惠版2</li>
        <li>特惠版3</li>
        <li>特惠版4</li>
        <li>特惠版5</li>
        <li>特惠版6</li>
      </ul>
    </div>

// css 部分：外部容器超出隐藏，ul用flex布局浮动
.top {
    overflow: hidden;
    ul {
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow-x: auto; /*滚动*/
      li {
        padding: 10px 20px;
      }
    }
  }
/*隐藏滚动条*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
8、不跟随内容，设置页面的整个背景色全铺不留空
.touchLightBox {
  width: 100%;
  min-height: 100vh; // 设置容器最小高度：百分之百视口高
  background-color: #b1d9fd;
  }
9、容器背景透明，容器内 文本颜色受到影响，也变透明！
预期效果：背景透明，内容文本颜色正常显示不要透明。
解决方案：通过伪元素::after实现
 html body {
    backdrop-filter: blur(2px);
    background: linear-gradient(90deg, #091c31 0%, rgba(13, 37, 56, 0) 100%);
}
//容器
.container{
    position:relative;
    width:200px;
    height:200px;
    color:#fff; // 文字颜色
}
.container::after{
     width: 100%;
     height: 100%;
     display: block;
     content: '';
     position: absolute;
     top: 0;
     left: 0;

     background: #1675ff;//透明背景
     opacity: 0.2;
}
10 、给项目加字体资源

1、把字体文件.ttf 文件放在 assets/fonts 目录下

2、main.js 引入

import '@/assets/fonts/DIN Alternate Bold.ttf'
import '@/assets/fonts/DingTalk_JinBuTi_Regular.ttf'

3、app.vue

多个字体就每个都引入一遍，这是在全局字体引用，只在某个页面的话就只放在相应页面即可
@font-face {
  font-family: 'DINAlternate-Bold';// 字体名字
  src: url('./assets/fonts/DIN Alternate Bold.ttf');
}

@font-face {
  font-family: 'DingTalk-JinBuTi';
  src: url('./assets/fonts/DingTalk_JinBuTi_Regular.ttf');
}
...

body {
  font-family: 'DINAlternate-Bold', sans-serif; // 默认字体
}

4、应用

h3{
   font-family: DingTalk-JinBuTi, DingTalk;
}
11、 css中 em 的正确打开方式

  1. 什么是em

    em 是一个相对单位，它的大小取决于其所处的元素的字体大小。 一般情况下，1em 等同于元素的字体大小。

  2. em的使用场景

    • 父元素字体大小改变时，子元素的大小也会相应改变
    • 在相对单位的情况下，可以灵活地根据浏览器缩放或者用户使用的设备的不同，自适应调整元素的大小

  3. 其他注意事项

    1.em不能嵌套使用，因为嵌套使用会导致字体大小不断放大。 2.如果想要基于根元素进行缩放，可以使用rem，1rem等同于根元素(html元素)的字体大小。

12、根据兄弟元素的数量设置不同样式
avatar
文章
阅读
粉丝