常见CSS样式问题-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35227244/article/details/132626069

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="flag? imgUrl : require('@/assets/img/XXX.png')" alt="" />
</template>

4、点击某个div区域外面，隐藏这个div

// js部分
 watch: {
    isShow(val) {
      val ? document.addEventListener('mousedown', this.onbourfun) : document.removeEventListener('mousedown', this.onbourfun)
    },
  },
 onbourfun(e) {
      if (!e.path.includes(document.querySelector('.box'))) this.isShow= false
    },
 // html部分
 <div class="box" v-if="isShow"></div>

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

在mounted时候添加 click事件，在unmounted的时候将事件删除
拿到组件的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>

这个布局原文出自链接 https://blog.youkuaiyun.com/JackieDYH/article/details/120763556
Grid布局更灵活多样，有复杂的布局，flex不够用的情况可以使用 Grid布局

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/XXX.png');
  background-size: cover;
}

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

// html部分:用一个容器top包裹住ul
<div class="top">
      <ul>
        <li>666</li>
        <li>6662</li>
        <li>6663</li>
        <li>6664</li>
        <li>6665</li>
        <li>6666</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;
}

9、不跟随内容，设置页面的整个背景色全铺不留空

.outerBox {
  width: 100%;
  min-height: 100vh; // 设置容器最小高度：百分之百视口高
  background-color: #b1d9fd;
  }

10、 iconfont 的使用方法

1、unicode 不常用

2、Font class 像字体一样，默认黑色图标，莫得彩色

3、Symbol  支持多色图标

Font class

1、下载到本地

2、在线引用
Symbol

1、下载到本地

iconfont-我的项目-symbol-下载到本地 - 解压命名文件夹为 iconfont（包含iconfont.js）放在vue项目中
在assets 目录下建一个icon.css文件

  // icon.css
  .icon {
     width: 1em;
     height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;
     overflow: hidden;
   }

3、在main.js中引入js和css

   import './assets/iconfont/iconfont.js'
   import './assets/css/icon.css'

4、最后vue文件中使用图标

   <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xuanzhong"></use>
   </svg>

2、在线引用

iconfont-我的项目-symbol-查看在线链接-复制链接 //at.alicdn.com/t/c/font_4*****_famq0z6ltd.js
第二步一样

在mian.js中引入 css文件，记住在线的不在main.js中引入js文件了，因为没得本地iconfont目录,而是在index.html中引入

// 在 main.js
import './assets/css/icon.css'
// 在public-index.html
<head>
    <script src="https://at.alicdn.com/t/c/font_4*****_famq0z6ltd.js"></script>
</head>

最后使用图标是一样的

 <svg class="icon" aria-hidden="true">
     <use xlink:href="#icon-xuanzhong"></use>
</svg>

11、p元素突然不换行问题

1、英文會将不包含空格、换行的连续文本认为是一个词，所以在默认情况下不换行

2、中文的话标点文字都是独立的，所以会自动换行

// 加上这个属性就可以了
word-wrap: break-word;
p{
     word-break: break-all; // 或者这种方式：让英文强制换行
}

12 、用css画一个三角形

盒子模型： width + padding+ border +margin ；盒子border是一个梯形；当内容尺寸为0 ，border给一个px 就变成一个实体，并且是由上右下左的三角形组成（因为内容0宽高），这时设置border其他三个方向的颜色透明就能得到一个三角形。

伪元素：在盒子的本身加伪元素画出三角形，再用定位放置三角形在盒子身边的位置。

.box{
    // ...
     position: relative;
    &::before {
        content: '';
        // 白色三角形
        border: 10px solid #fff;
        border-top-color: transparent;
        border-left-color: transparent;
        border-bottom-color: transparent;
        width: 0;
        height: 0;
        // 定位
        position: absolute;
        top: 13px;
        left: -20px;
      }
}