CSS
文章平均质量分 51
叶子_o
这个作者很懒,什么都没留下…
展开
-
解决移动端不同分辨率下 按钮上下不居中问题(scale 缩放)
问题一:按钮上下不居中移动端项目中,遇到这样一个问题,明明写的高度和行高一致,但是在有些分辨率的手机上看上下就是不居中(如下图所示,文字靠上)。尝试过使用padding代替高度,效果也不是很好。问题二:文字限制只显示一行时,有的手机显示多余的部分多行文字设置只显示一行,其余部分不显示。设置高度和行高一致,有的手机上会显示如下效果。解决方法:上边两种情况都可以用这种方式解决:先将元素所有涉及到尺寸大小的乘以2,再用 scale 缩放0.5倍。1.解决按钮上下不居中原代码:.van-sub原创 2021-04-13 10:42:56 · 1320 阅读 · 0 评论 -
flex布局单个元素右对齐
在最后一项元素使用样式:margin-left: auto;转载 2020-10-29 14:26:55 · 4202 阅读 · 3 评论 -
mouseover闪烁问题
问题:span标签绑定mouseover/mouseout事件,显示/隐藏一个信息框div。悬停上去一直闪烁,改成mouseenter也没用。原因:悬停上去信息框div盖住了span标签,mouseover事件失效,mouseout事件生效,信息框消失。信息框消失后鼠标又正好悬停在span标签上,mouseover事件生效,mouseout事件失效,信息框显示。。。一直无限循环就会看到一直闪烁的现象。解决:在你需要显示的信息框上加上 pointer-events: none版权声明:本文为转载 2020-07-09 15:49:33 · 816 阅读 · 0 评论 -
绝对定位的元素宽度自动撑开
position:absolute;white-space: nowrap;原创 2020-07-09 14:44:51 · 1635 阅读 · 1 评论 -
一个由标签高度设置失效导致的bug
今天做项目时遇到一个很奇怪的问题,根据UI的设计图,要给每个标签点击时加上下划线,我这里用的是 boder-bottom,但是却没有出现该有的效果。要实现的效果如下:原本的代码如下:<view class="section"> <scroll-view scroll-x="true" class="scroll"> <view class="lists"...原创 2019-12-27 19:38:37 · 229 阅读 · 0 评论 -
nth-child(3n+5) 与 nth-child(5+3n)
项目中需要将为标签设置单独的样式,最初我是这样写的.goods:nth-child(5+3n){ margin-right: 0;}结果发现没有生效,查手册发现css的规则只有 (an + b),用(b + an)是不被识别的。这里改成 (5+3n) 就好了。...原创 2019-12-03 18:23:26 · 443 阅读 · 0 评论 -
CSS去掉input框里面的默认背景颜色
在写代码的时候,有时候会遇到一些默认的颜色,比如input框在谷歌浏览器里面会出现黄色的背景默认的颜色,这是因为input输入框记忆功能导致背景变成蓝色,这个时候就需要用css代码属性来处理一下。谷歌浏览器在css代码里面添加,阴影覆盖即可-webkit-box-shadow: 0 0 0 1000px white inset;...转载 2019-12-03 10:05:17 · 6830 阅读 · 1 评论 -
图片垂直居中在容器中
div{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justif...原创 2019-11-29 09:43:23 · 118 阅读 · 0 评论 -
把select的小图标替换成 自己想要的图片
不同的浏览器默认的select的选项图标是不同的。appearance属性:去掉浏览器自带的appearance: none !important; // 去除select默认的下拉图标-webkit-appearance: none; // 兼容chrome-moz-appearance: none; // 兼容firefoxbackground: url('tir.jpg') ...原创 2019-11-28 19:32:54 · 727 阅读 · 0 评论 -
渐进增强和优雅降级
由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以导致了工作流程上的不同。渐进增强(Progressive Enhancement): 一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验...原创 2019-11-11 21:55:32 · 84 阅读 · 0 评论 -
CSS3 鲜为人知的属性
一、-webkit-tap-highlight-color这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮,设置颜色的alpha值为0即可。示例:设置高亮色为50%透明的红色:-we...转载 2019-11-06 20:48:33 · 302 阅读 · 0 评论 -
CSS滤镜filter让图片模糊
CSS代码:.blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); ...原创 2019-11-04 20:23:08 · 377 阅读 · 0 评论 -
解决1px边框 -- border.css
@charset "utf-8"; .border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.border-topleft,.border-rightbottom,.border-topright,.border-bottomleft ...转载 2019-07-22 18:07:38 · 229 阅读 · 0 评论 -
CSS3常用新增选择器
1.属性选择器[属性名][属性名=“值”][属性名^=“值”] 以值开头[属性名*=“值”] 包含值[属性名$=“值”] 以值结尾2.结构伪类选择器:first-child 第一个元素:last-child 最后一个元素:nth-child(n) 第n个元素:nth-last-child(n) 倒数第n个元素:nth-child(a*n+b):nth-child(-n...原创 2019-05-09 20:58:17 · 147 阅读 · 0 评论 -
纯CSS实现多行文字垂直居中几种方法
场景:父元素 高度固定,如何使其中的文字垂直居中?一、table布局1. 利用display:table+display:table-cell的方法&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&转载 2019-03-13 18:03:10 · 2829 阅读 · 0 评论 -
CSS盒模型、边距重叠及BFC
css盒模型:标准盒模型 浏览器默认怪异盒模型css盒模型区别:标准盒模型 width = 内容宽度怪异盒模型 width = 内容宽度 + padding + bordercss盒模型设置:标准盒模型 box-sizing:content-box;怪异盒模型 box-sizing:border-box;JS设置/获取盒模型对应宽高:dom.style.width/hei...原创 2019-03-15 19:19:16 · 358 阅读 · 0 评论 -
table布局
看了这篇文章,你可以了解到以下布局方法:table-cell定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局详情链接...转载 2019-03-15 13:10:40 · 117 阅读 · 0 评论 -
5种方法实现两侧宽度固定的三列布局
题目: 实现以下页面布局要求: 高度固定,左右两侧宽度固定,中间部分宽度自适应通用样式*{ margin:0; padding:0;}.layout{ margin-bottom:20px;}.layout div{ min-height:100px;}方法一、浮动布局/*css部分*//*1. 浮动布局*/.layout.float .left{ float:...原创 2019-03-14 17:55:51 · 344 阅读 · 0 评论