CSS问题总结

置顶 zhougl996

已于 2024-08-14 16:40:57 修改

阅读量1.2k

点赞数

分类专栏：前端文章标签： css html5 html

于 2021-07-23 10:46:57 首次发布

本文链接：https://blog.csdn.net/aoutlaw/article/details/119026229

版权

前端专栏收录该内容

55 篇文章 2 订阅

订阅专栏

本文详细介绍了CSS中设置文本超出显示、线性渐变、 scoped样式、文字截断、表格高度修改、填充父元素、修改Element UI样式、设置元素宽度、背景渐变进度条、禁止点击事件、相对单位使用、Flex布局、字体大小限制、箭头样式、渐变色字体、移动闪光效果、无限轮播等实用技巧，涵盖了前端开发中的多个重要知识点。

摘要由CSDN通过智能技术生成

1.css设置超出宽度文本显示

/* 单行超出*/
.pintr {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
/* 多行超出超出 -webkit-line-clamp: 3; 行数*/
  .pintr {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

2.CSS3 线性渐变

.grad1 {
    height: 600px;
	background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(#004492, #009CE6);
}

3.vue中css样式只在当前页面生效

<!-- scoped和css的扩展语言的语法 scss或者less-->
<style scoped="scoped"  lang="scss">
  .el-card /deep/ .el-card__body {
    padding: 0;
  }
</style>

4.CSS设置文字超出则显示.....

 .one{
            width: 300px;
            overflow: hidden;/*超出部分隐藏*/
            white-space: nowrap;/*不换行*/
            text-overflow:ellipsis;/*超出部分文字以...显示*/
        }
 .one li（li是标签）{
            width: 300px;
            overflow: hidden;/*超出部分隐藏*/
            white-space: nowrap;/*不换行*/
            text-overflow:ellipsis;/*超出部分文字以...显示*/
        }

5.修改el-table 的高度

id为ruleActionInfo 下的el-table下的th和td的样式

  #ruleActionInfo {
    .el-table {

      /deep/ th {
        padding: 0;
      }

      /deep/ td {
        padding: 0.5rem;
      }
    }
  }

6.CSS填充父元素剩余部分

<div style="float:left;width: 18%;height:100%;position:absolute;overflow: auto;">
    移动业务计费收入（单位：万元）
</div>
<div style="float:right;width: 80%;">xxxxxx</div>

7.修改element的原样式

class="itemlabel" 放到他的父元素上

/deep/ 必须有,没有会影响其他页面

scoped="scoped" 必须有,没有会影响其他页面

.itemlabel /deep/ .el-form-item__error {
    padding-top: 0;
  }

8.span设置宽度有效无效问题

test <span class="data-span" style="margin: 0.625rem;">test</span> test

 .data-span {
    text-align: center;
    display: -moz-inline-box;
    display: inline-block;
    width: 1.25rem;
    line-height: 14px;
  }

9.背景渐变色进度条

.data-back-ground {
  background-image: linear-gradient(to right, #3587d8 , #fb3a7e);
}

10.css禁止点击事件

style="pointer-events: none;"

11.vw、vh、rem、em尺寸

em：相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

rem：全名root em，简写rem，故其也是一个相对长度单位，但只相对于根元素，可以简单的通过更改根元素大小，从而调整所有字体大小。

rem比em尺寸清晰，易于维护

rem和em通常与scss、less、postcss等预编译器相结合，通过定义一些函数，或者使用一些插件

pc端：开发时尽量用px

移动端：px方式，rem方式，vw+rem方式都可以

vw：视口宽度（Viewport Width）1vw 等于视口宽度的1%

vh：视口高度（Viewport Width）1vh 等于视口高度的1%

vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw
vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh

12.flex布局小技巧之让某个子元素靠右或靠左显示

父盒子加了display: flex，就相当于起到浮动的效果，盒子会自行排列成一排
若想让父盒子里的某一个盒子靠右显示，其他盒子居左，只需要在父盒子里面，加入display: flex，在想要移动的盒子里面，加入margin-left: auto即可；
同理，如果你想让第一个盒子向左显示，其余盒子都向右显示，只需要给左边的第一个盒子设置 margin-right:auto即可；

<!DOCTYPE html>
<div class="father_box">
    <!--三个子盒子-->
    <div class="son_box1">普通盒子甲</div>
    <div class="son_box2">普通盒子乙</div>
    <div class="son_box3">靠右显示盒子</div>
</div>
<style>
    .father_box {
        margin: 100px auto;
        width: 300px;
        height: 200px;
        background-color: rebeccapurple;
        display: flex; /* 设置弹性容器 */
    }

    .son_box1 {
        width: 80px;
        height: 80px;
        background-color: cornflowerblue;
        margin-right: auto; /* 向左浮动 */
    }

    .son_box2 {
        width: 80px;
        height: 80px;
        background-color: pink;
    }

    .son_box3 {
        width: 100px;
        height: 100px;
        background-color: blue;
        color: #ff9d00;
        margin-left: auto; /* 向右浮动 */
    }
</style>

</html>

行内元素也可以使用Flex布局，子元素的代码如下：

.box{ display:inline-flex;}

13.CSS设置10px大小字体

由于chrome有限制，css设置的字体大小最小为12px,可以通过缩放实现字体为10px

.font-size-10px{
	font-size:20px;
	zoom:0.5;
}

14.CSS箭头样式

<div class="arrow">arrow</div>

.arrow {
    background: linear-gradient(45deg, #04e6fb, #65ff9a);
    clip-path: polygon(
        0 0,
        30px 50%,
        0 100%,
        calc(100% - 30px) 100%,
        100% 50%,
        calc(100% - 30px) 0
    );
}

15.渐变色字体

.b{
    background-image: linear-gradient(to bottom, #007cf3, #9eeefe);
    -webkit-background-clip: text;
    color: transparent;
}

16.css移动的闪光

.ing-cell-show {
  width: 80%;
  font-size: 14px;
  font-weight: normal;
  background: #e8f3fe;
  margin-bottom: 10px;
  color: #7dbcfc;
  line-height: 15px;
  padding: 8px;
  border-radius: 4px;
  position: relative;
  &::before {
    content: "";
    width: 20%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    animation: scan 2s linear infinite;
    transform: skew(-20deg);
  }
}
@keyframes scan {
  0% {
    left: -20%;
  }
  100% {
    left: 90%;
  }
}

17.CSS 实现的无限轮播

从上到下

<div class="scroll-wrap">
  <div class="scroll-text">
    <p>这是需要滚动的文字。</p>
    <p>这是另一段需要滚动的文字。</p>
    <p>这是第三段需要滚动的文字。</p>
  </div>
</div>

.scroll-wrap {
  height: 60px; /* 容器高度 */
  overflow: hidden; /* 隐藏溢出的内容 */
  position: relative;

  .scroll-text {
    position: absolute;
    top: 0;
    left: 0;
    animation: scroll 5s linear infinite; /* 滚动时间，可根据实际情况调整 */
  }
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

无限轮播

原理: 50%的偏移加上两次重复的数据

<div class="scroll-wrap">
  <div class="scroll-text">
    <!-- 第一次 -->
    <p>这是需要滚动的文字。</p>
    <p>这是另一段需要滚动的文字。</p>
    <p>这是第三段需要滚动的文字。</p>
    <!-- 第二次 -->
    <p>这是需要滚动的文字。</p>
    <p>这是另一段需要滚动的文字。</p>
    <p>这是第三段需要滚动的文字。</p>
  </div>
</div>

18.DIV为空时仍然保持占位

1.设置最小高度样式min-height:1px;

2.设置透明边框border: 1px solid transparent;

19.居中

内联元素： display:inline或display:inline-block

text-align: center;

块状元素：display:block或display:inline-block

margin:0 auto;
width: 80%;

20.修改滚动轴样式

.webkit {
    &::-webkit-scrollbar { /* 整个滚动条样式 */
      width: 8px; /* Width of the scrollbar */
    }
    &::-webkit-scrollbar-track { /* 滚动条轨道选择器 */
      background: rgba(10,28,92,0.39);
    }
    &::-webkit-scrollbar-thumb { /* 滚动条滑块选择器 */
      background: rgba(24,144,255,0.1);
    }
    &::-webkit-scrollbar-thumb:hover { /* 滚动条滑块鼠标悬浮样式 */
      background: rgba(145, 214, 191, 0.1);
    }
  }