![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 76
明明很开心_l
路漫漫其修远兮,吾将上下而求索。共勉。
展开
-
css实现单边斜切效果
需求UI图中有需要斜切图样的需求,一个进度条,并且进度项不定,是一个list类型。效果如图,以下就是一个三个元素的数组遍历生成的进度条:第一次尝试首先写进度条并不难,只需要以下结构:// html<div class="progress-outer"> <div v-for="(item,key) in items" :key="index" class="progress-inner" :style={'width': item.percent + '%','left':原创 2021-09-29 18:51:54 · 3691 阅读 · 0 评论 -
css实现宽高按比例拉伸
场景开发中等宽列表开发经常会使用flex进行宽度的自适应。但为了在大屏时不至于只变化宽度,UI提出需要列表每一项宽高自适应。解决思路这么简单的需求,肯定不考虑使用js来监听宽度拉伸设置高度,成本太高,所以优先考虑如何从css入手。1.是否有属性直接设置宽高比?2.是否有哪些属性是根据宽度而变化的?解答方案是否有属性直接设置宽高比?答案是有的,这个属性是:aspect-ratio,MDN对于这个属性的解释是:aspect-ratio CSS 属性为box容器规定了一个期待的纵横比,这原创 2021-09-25 16:37:55 · 1136 阅读 · 0 评论 -
css中的line-height设置数字,em和百分比的区别
疑惑关于line-height这个css属性在平常布局中真的很熟悉了,以前简单的用法都是直接设置具体像素值:line-height:28px;随着考虑到响应式等因素,慢慢开始了解无单位数字和使用em或百分比。一直以来都觉得为什么需要定义三种格式?明明他们几个形式都是属于字号的倍数而已。所以一直想探究一下究竟有什么不一样。实验首先我定义了四个p元素,每个line-height设置分别是px,em,无单位数值和百分比。效果如下:发现它们在这种状态下是一样的,都是属于当前字号的2倍。现在我们在它们的父原创 2020-08-04 14:55:02 · 3098 阅读 · 0 评论 -
微信小程序textarea文本穿透弹窗解决
问题现象在小程序项目开发中,页面是个表单内容,其中包含有textarea组件。同时页面有弹出框出现textarea文本穿透到弹窗的问题。在ios中不会出现这种问题,而在安卓机会出现。按原本开发想法是textarea组件层级高于弹窗,于是使用z-index进行层级调节。但是发现并没有预料中的解决问题。分析看小程序官方文档发现textarea是原生组件,原生组件的覆盖就会想到cover-view,但是查看文档发现cover-view只支持嵌套一下几个,如图:猜测它也许是个微信小程序的bug,很快就在社原创 2020-06-12 16:37:32 · 2109 阅读 · 1 评论 -
IE9以及IE9+兼容 更改select框默认下拉图标
IE9以及IE9+兼容 更改select框下拉图标在一般浏览器中使用下列属性在IE中使用注意IE9最后设计图中因为跟select的下拉图标不一样,使用了css把原本的样式去掉,再使用background图片定位在右边在一般浏览器中使用下列属性select { appearance:none; -moz-appearance:none; -webkit-appearance:none;...原创 2019-12-12 11:24:34 · 528 阅读 · 0 评论