css样式
飞歌Fly
这个作者很懒,什么都没留下…
展开
-
css 文本、文字展开与收缩,查看更多收起
<view class='containers'> <text class="content {{ellipsis?'ellipsis':'unellipsis'}}"> 飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发前二十阿里附近发打发打发是范德萨发放就开了房间爱离开房间爱卡房间爱疯爱疯飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发 </text> <view bindtap='elli...转载 2022-01-07 10:59:47 · 1833 阅读 · 1 评论 -
elemen-ui 自定义 tabs 样式
::v-deep{ .el-tabs__item:hover { color: #3A4E64; } .el-tabs__item { color: #B4B4B4; font-weight: bolder; } .el-tabs__item.is-active { color: #3A4E64; ...原创 2021-11-16 10:51:12 · 1002 阅读 · 0 评论 -
ios刘海屏适配
现在ios的iphoneX、iphone11、iphone12都具有刘海屏的设计,这部分刘海屏机型和没有刘海屏的在页面显示上有一些差别。所以要做一下区分。下面是ios主流机型的分辨率信息。注意到在逻辑像素一项,iphoneX以上机型(包括iphone11、iphone12)逻辑像素高度 pt都大于等于812所以默认逻辑像素高度 p大于等于812的就是iphoneX以上机型,而且这些机型都有刘海屏// 是否iOS刘海屏 isIosLiuhai() { // 默认物理高度大于8原创 2021-05-12 16:12:53 · 1426 阅读 · 0 评论 -
postcss-px-to-viewport include的用法
postcss-px-to-viewport这个插件还是很有用处的,可以使 px单位转换成vw视口单位,include可以限制只在某个文件夹或者某个文件使用px转vw的功能,比较适合一个项目有两种不同单位的情况。因为npm 上面的postcss-px-to-viewport包并不支持include的用法,需要使用github上面的包,而且在使用include时还有一些误导,所以简要说明一下。原文如下:https://github.com/evrone/postcss-px-to-viewpor.原创 2021-04-25 10:19:01 · 5412 阅读 · 3 评论 -
element-ui dialog(多弹框、嵌套弹框)被蒙版遮住
我的情况是,在一个弹框中,点击按钮 再弹出了一个弹框,第二个弹框被蒙层遮住了。看官方文档,查阅了下资料https://element.eleme.cn/#/zh-CN/component/dialog发现dialog下面有两个属性,试了下,解决了问题...原创 2019-12-06 15:48:56 · 8458 阅读 · 0 评论 -
移动端常见九宫格布局
<div class="grid"> <ul class="item cf"> <li class="liItem"> <div>标题一</div> </li> <li class="liItem"> <...原创 2019-10-31 10:11:52 · 1407 阅读 · 0 评论 -
css中“~”(波浪号)、“,”(逗号)、 “ + ”(加号)和 “ > ”(大于号)是什么意思?
为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景: p~ul{ background:#ff0000; } <p>快乐生活</p> <ul> <li>生活</li> <li>生活</li> <...转载 2019-09-10 14:19:20 · 77066 阅读 · 1 评论 -
边距margin重叠解决方案(BFC)
边距重叠解决方案(BFC)首先要明确BFC是什么意思,其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。...转载 2019-07-18 16:59:33 · 886 阅读 · 0 评论 -
vue前端项目引入iconfont阿里图标的四种方式
一、首先登陆阿里云矢量图标库,把需要的字体图标加入到自己的项目中http://www.iconfont.cn/home/index二、阿里云图标的四种方式(推荐第二种方式Font class引入,如果不考虑网络问题可以用在线引入的方式)进入项目以后会看到阿里云可以选择三种方式进行导入图标(1)unicodeunicode的主要的特点是优势①兼容性最好,支持ie6...原创 2019-02-12 18:18:26 · 24719 阅读 · 3 评论 -
Sass 、Scss、LESS 和 Stylus区别总结
转载自:https://blog.csdn.net/pedrojuliet/article/details/72887490CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。1.什么是 CSS 预处理器CSS 预处理器是一种语言用来为 CSS 增加一些编程的...转载 2019-02-12 16:41:25 · 6219 阅读 · 2 评论 -
Canvas获取图像、图片的平均颜色或主色调
转载自:https://blog.csdn.net/teajs/article/details/50124207首先,我们可以使用canvas的getImageData函数获取所有像素的数据。然后将所有的rgb三值各取平均值即可。function getImageColor(canvas, img) { canvas.width = img.width; canvas...转载 2018-10-24 18:17:24 · 6402 阅读 · 0 评论 -
vue 实现按钮多选和反选
效果如下:点击选中,再次点击反选,我做的项目是弹框,请按实际需要去掉弹框样式,其中@c-main代表的颜色是 #c6ae6c代码如下:<template> <!--推荐人弹窗--> <div class="sourcePop"> <div class="sourcePopContent"> ...原创 2018-09-04 15:48:57 · 4115 阅读 · 1 评论 -
mint-ui 时间选择器Datetime Picker的用法,默认不是当前时间,有一节空白。
使用了mint-ui,里面的文档实在太简略了,有许多方法和配置都没有具体配置,要自己去摸索,实在是揪心。今天使用mint-ui的时间选择器时默认有一节留白,看着不是很舒服,而且默认的时间也是系统设置的开始时间。(类似下图)解决方法是 把picker 的时间默认为当前时间(或者看需求定义成需求时间)设置了 new Date()之后就正常了,默认当前时间居中显示,如果觉得年份太多,...原创 2018-08-29 14:49:53 · 22912 阅读 · 18 评论 -
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
转载自:https://www.imooc.com/article/17571网页可见区域高:document.body.clientHeight网页正文全文高:document.body.scrollHeight网页可见区域高(包括边线的高):document.body.offsetHeight网页被卷去的高:document.body.scrollTop屏幕分辨率高:window.screen...转载 2018-05-11 10:08:55 · 169463 阅读 · 19 评论 -
transform、transition 和 animation的详细讲解
转载:https://segmentfault.com/a/1190000004460780 关于CSS3制作动画的几个属性:变形(transform),移动、缩放、旋转(0.2毛特效)转换(transition),需要事件触发,只能一次(0.5毛特效)动画(animation),动画,可一直执行(1毛特效)一、transform属性:旋转rotate(中心为原...转载 2018-05-17 15:09:11 · 989 阅读 · 0 评论 -
7种方法解决移动端Retina屏幕1px边框问题
转载自:https://www.jianshu.com/p/7e63f5a32636造成边框变粗的原因其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 d...转载 2018-03-02 12:17:08 · 429 阅读 · 0 评论