CSS
hibiscusxin
人生海海,山山而川,不过尔尔。
展开
-
el-select 右侧icon样式问题
注意:样式需写在没有scoped的style标签里。原创 2023-07-12 11:31:15 · 307 阅读 · 0 评论 -
css 背景图片和背景色渐变同时存在
css 背景图片和背景色渐变同时存在原创 2022-06-02 14:00:30 · 2238 阅读 · 0 评论 -
vue中给div添加disabled功能
vue中给div添加disabled功能给div添加一个disabled的功能,不能对其进行点击各种操作。<div class="disFunc"> ...</div>.disFunc { pointer-events: none;}原创 2022-02-10 17:19:59 · 5141 阅读 · 0 评论 -
css中position的覆盖问题
css中position的覆盖问题场景:已写好position样式,更换主题色,需再全局用right:0;覆盖掉left:0;的样式解决方法:left: auto;具体如下:.bottom { width: calc(100% - 240px); left: auto !important; rigth: 0; bottom: 0;}...原创 2021-12-21 17:45:34 · 731 阅读 · 0 评论 -
css的block、inline和inline-block
css的block、inline和inline-blockblock:块级元素一个块级元素独占一行,即使设置了width,仍然独占一行。默认情况下block元素宽度自动填满父元素宽度。可以设置width、height、margin、padding属性。常见块级元素:<header>、<aside,>、<video>、<audio>、<footer>、<h1~6>、<p>、<div>、&原创 2021-12-01 10:58:00 · 989 阅读 · 0 评论 -
选中last-child
选中last-child,修改最后一个div样式<div class="parent"> <div class="children" v-for="item in List" :key="item.value"> {{ item.label }} </div></div>let List = [ { label: 'ceshi1', value: 11 }, {原创 2021-11-09 14:52:41 · 62 阅读 · 0 评论 -
css超出最大高度,滑动,隐藏滚动条
css超出最大高度,滑动,隐藏滚动条<div class="list-wrapper"> 滚动区域</div>.list-wrapper { max-height: 100px; overflow: auto;}// 设置滚动条的长、宽为0.list-wrapper::-webkit-scrollbar { height: 0; width: 0;}...原创 2021-10-12 15:00:42 · 1594 阅读 · 0 评论 -
CSS文字前面有不同颜色的圆
css文字前面有不同颜色的圆 <span class="circle level1">level1</span> <span class="circle level2">level2</span> <span class="circle level3">level3</span>.circle { position: relative; } .level1::before, .level2:原创 2021-06-07 17:56:00 · 1530 阅读 · 0 评论 -
css溢出滚动
css溢出滚动white-space: nowrap;-webkit-overflow-scrolling: touch;overflow-x: auto;原创 2021-05-31 16:15:31 · 615 阅读 · 0 评论 -
标签宽度确定,让文字在标签内平均分布
标签宽度确定,让文字在标签内平均分布<div class="basic-info"> <div class="basic-info__username"> <div class="left"> <span class="text">用户名</span> <span class="value">{{ info.userName }}</span>原创 2021-03-31 16:24:23 · 883 阅读 · 0 评论 -
CSS文字不超过固定行数,超出部分
CSS文字不超过固定行数,超出部分…1、不超过一行white-space: nowrap; // 文本不换行overflow: hidden; // 超出部分隐藏text-overflow: ellipsis; // 多余的显示...2、不超过两行overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;...原创 2021-03-17 18:07:07 · 560 阅读 · 0 评论