css
明月松江
年轻就是力量,有梦就有未来!
展开
-
取消radio的选中状态
radio一旦选中一般是取消不了选中状态的,但是可以通过js操作数据的方式实现。以element-ui的radio组件为例,可以给radio增加一个native后缀去监听原生的点击事件(不加无法监听点击),增加一个prevent后缀去除radio组件原来自带的行为来执行新的逻辑。当点击的时候,如果当前点击的选项还没有被选中过,那么给v-model绑定的值赋值为当前选中的选项的值,如果当前点击的选项已经选中了,那么v-model绑定的值就重置为空,这样就可以实现***取消radio的选中状态***的效果了。原创 2021-04-12 12:04:14 · 4293 阅读 · 0 评论 -
css文字渐变的实现
比较了几种方案,个人觉得background-image结合background-clip以及text-fill-color是最佳的实现方案。原理:text-fill-color把文字变透明,用background-image设置渐变作为背景,用background-clip来裁切背景,裁切的范围正好是文字的显示范围。举例:<div class="charge-btn"> ...原创 2020-03-05 11:38:03 · 314 阅读 · 0 评论 -
移动端开发遇到的坑之input里的placeholder不垂直居中的问题
今天发现input输入框里的placeholder 在ios设备上不垂直居中。一开始我设置了input::-webkit-input-placeholder里的line-height等于height: input::-webkit-input-placeholder { height 42px line-height 42px }经过查询资料得知,input输入框的line-...原创 2019-05-30 13:45:10 · 8539 阅读 · 2 评论 -
关于ios下输入框无法输入的问题
今天在项目中遇到在苹果手机中无法输入的问题。我的安卓手机和在谷歌手机模拟器上都没出现这个问题,但是有同事告诉我他的苹果手机无法输入。我自己试了下他的手机果然点击输入框没有任何反应。我觉得可能是css的问题,于是在项目的全局css里寻找关于input框的css。结果我发现了这样一行代码:*{ -webkit-user-select:none;}好吧,这行代码是前人留下的代码。字面...原创 2019-05-20 23:20:49 · 3064 阅读 · 0 评论 -
点击input外面的按钮input仍然保持焦点
手机项目中遇到一个需求:点击input输入框外面的按钮,input输入框的焦点仍然在,且键盘不收缩。使用了label标签来解决这个需求:<label for="idName"> <input id="idName"/> <div @click=doSomething() > </div></label>这样即使点击了...原创 2019-06-14 14:45:28 · 4791 阅读 · 3 评论 -
给头像加border和border-radius
项目要求给用户头像加border和border-radius且保持头像大小不变。一开始直接用img标签,发现图片加border后被撑大了,后来想到用div加background-image来实现:<div class="img" style="background-image:xx图片路径..." ></div>.img{ width:50px; heigh...原创 2019-06-11 22:06:42 · 324 阅读 · 0 评论 -
解决div比里面包含的img图片高度大的问题
如果用div包裹一个img,你会发现div的高度要超过img的高度。搜集了一下解决方法主要有几种:1.div设置font-size:0<div style="font-size:0"> <img /></div>2.div设置display:flex<div style="display:flex"> <img />...原创 2019-06-17 12:05:29 · 6252 阅读 · 4 评论 -
input输入框光标的颜色
要改变input输入框光标的颜色,可以使用css的一个属性来设置:caret-color:xxx例如:input{ caret-color: yellow}效果如下:原创 2019-06-10 12:01:14 · 4008 阅读 · 0 评论 -
行内多个span标签之间空白的解决方法
写span标签的时候会发现自己写的span标签之间会有空白,哪怕已经设置了margin:0查询资料得知有几种解决办法:1.html里写span标签的时候把后面一个span标签紧跟在前一个span标签后面:<span>1</span><span>2</span>2.设置外层盒子的font-size为0:<div style="font...原创 2019-06-05 10:42:17 · 3591 阅读 · 1 评论 -
div标签里放img标签时候遇到的坑
项目遇到div标签里放img标签的情况,div的width、height 都已经设置好,img的width、height 为100%。但是发现渲染出来的img超出了div的高度,如下图:后来尝试了下发现应该给div设置line-height(和height的大小一样),这样渲染出来的img才不会超过div的范围。见下图:总结:div里写img且img的宽高和div一致的时候,一定要设置l...原创 2019-03-28 15:06:58 · 4547 阅读 · 0 评论 -
使用pointer-events控制div元素的禁用状态
需求:某个div上绑定了点击事件,在不点击button按钮的时候,div处于禁用状态(即点击事件不可触发),只有点击了button这个div才解除禁用状态。思路:在button点击前给div一个disabled的状态,点击后把disaled状态去掉。如果是input可以直接使用disabled属性,但是div没有这样的属性,只能另辟蹊径。解决办法:使用css属性pointer-event...原创 2019-12-12 18:36:51 · 1049 阅读 · 0 评论 -
如何让tab滑动到顶端置顶
之前做项目的时候遇到一个需求:tab切换栏滑动到顶端的时候置顶不动,当再次下滑的时候恢复原状。当时为了做这个功能,还特意去监听了浏览器的滚动,当滚动到特定位置的时候,让隐藏的置顶的tab(和标准文档流里的tab内容一样)显示。现在发现了一个css属性可以快速实现这个功能,那就是:position:sticky;粘性(sticky)定位可以被认为是相对定位(relative)和固定定位(fi...原创 2019-12-09 11:51:47 · 2258 阅读 · 0 评论 -
flex布局如何让flex项之间的间距一样大
之前在使用flex布局的时候,为了让flex项之间产生间距,设置了如下属性:ul{ display:flex; flex-wrap:wrap; justify-content:space-around;}li{ width:30%; height:100px;}设置之后发现中间的间距确实一样大,但是左边第一个和右边第一个flex项距离主轴两端的距离却和中间的间距不一...原创 2019-12-09 11:16:54 · 57071 阅读 · 1 评论 -
css3 object-fit/object-position 属性
object-fit 类似于background-size,表示图片内容在容器里如何显示,它有5种值:fill,contain,cover,none,scale-down默认值是fill,不保持内容的宽高比拉伸到撑满容器;而cover是覆盖满容器,但是保持内容的宽高比;contain是保持宽高比在容器里放下,可能会在容器里留下空白;none是保持宽高比且保持原始尺寸大小;scale-...原创 2019-10-30 10:28:14 · 255 阅读 · 0 评论 -
移动端开发之阻止滚动传播
情景:在弹出框里滚动,当滚动到底部或者顶部的时候,发现遮罩层下面的内容也开始滚动。解决办法:使用overscroll-behavior: contain来阻止滚动事件的传播。overscroll-behavior 属性有 3 个值:1.auto - 元素的滚动会传播给祖先元素;2.contain - 阻止滚动传播。滚动不会传播给祖先,但会显示元素内的原生效果。例如,Android 的炫光...原创 2019-09-19 15:30:25 · 421 阅读 · 0 评论 -
移动端开发之ios下的input输入框显示问题
测试给我提了关于ios下的input输入框显示问题的Bug。问题1:input在ios存在重影边框问题问题2:input属性placeholder在iOS中显示不完整例图:问题1解决办法:设置input的outline和-webkit-appearance为noneinput { outline: none; -webkit-appearance: none; }问题2解...原创 2019-09-18 11:37:00 · 1511 阅读 · 0 评论 -
textarea输入框随着内容的增加使滚动条向下滚动
测试给我提了个bug:在textarea输入框下,表情输入多行后,滚动条没有向下滚动。于是我自己测试了下,如果连续输文字,当超过textarea限制的行数后,滚动条会自动向下滚动。但是连续输入表情(此时textarea是失去焦点的),我发现当超出textarea限制的行数后,滚动条是不会自动向下滚动的。我又去看了微博的textarea,发现也是这种情况。PS:不知道是不是微博的测试没有这么变...原创 2019-08-19 11:45:03 · 3838 阅读 · 0 评论 -
小于1px不识别的解决办法
在移动端开发中,有时候会遇到height小于1px的情况。而有的手机不识别1px以下,设置height:1px和设置height:0.5px看上去效果一样。解决的办法是:1.利用transform里面的scale来缩小heightheight:1px;transform:scaleY(0.5)2.利用vw来设置height,先将height:1px转为对应的vw值(比如1px对应0....原创 2019-07-22 16:27:15 · 924 阅读 · 0 评论 -
-webkit-line-clamp属性对动画的影响
如果html盒子使用了-webkit-line-clamp属性,那么要注意可能会对盒子的动画属性产生影响。举个例子:如果一个div设置了style:height:100px;-webkit-line-clamp:6;transition:height 0.1s ease某一时刻将div的style修改为:height:200px;-webkit-line-clamp:100;现在想让d...原创 2019-07-01 16:38:56 · 678 阅读 · 0 评论