css
css
Mosowe
vue(2/3),react,uniapp,小程序,javascript,typescript,node
展开
-
CSS: 一些小知识点
文章目录更改input光标颜色移除input`type="number"`尾部的箭头自定义文本选中样式文本禁止选中水平垂直居中1. flex2. position3. display:table4. 父级无固定高度:padding,line-height更改input光标颜色input { caret-color: #ff0000;}移除inputtype="number"尾部的箭头input::-webkit-outer-spin-button,input::-webkit-inner-原创 2021-10-08 11:02:31 · 94 阅读 · 0 评论 -
css:如何修改chrome记住密码后自动填充表单的黄色背景 ?
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); /* #FAFFBD; */ background-image: none; color: rgb(0, 0, 0); }原创 2021-09-22 10:45:58 · 259 阅读 · 0 评论 -
css:移动端一像素边框的实现
尽管我移动端采用的是vh/vw来适配所有的手机(基本没用css媒体查询),但是针对1px的边框(项目中所有小于等于1px的都不会转换成vh/vw),在移动端还是显得很粗(写到这里还没试过将1px转成vh/vw的情况,-_-||)。本方法采用的是(老生常谈,网上一大堆-_-||)伪类实现: .notOrder{ font-size: 20px; color: #F42B3F; display: inl原创 2021-02-20 11:08:48 · 302 阅读 · 0 评论 -
css:关于line-height在ios与安卓的不兼容处理
也是拖了很久才来写。。。。在实际开发中发现,css的line-height属性在ios和安卓中有那么几个像素的偏移,导致两端显示不一致,我的处理方法是:去除line-height使用padding width: 72px; height: 28px; text-align: center; line-height: 0px; padding: 14px 0; box-sizing: border-box;height可以不写,那么就用不上box-sizing原创 2021-02-20 10:59:32 · 2040 阅读 · 0 评论 -
css:多行省略
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;原创 2020-03-30 17:11:27 · 173 阅读 · 0 评论 -
css:textatra连续输入数字及字母不换行
word-break:break-all; word-wrap:break-word;转载 2019-04-15 09:36:31 · 227 阅读 · 0 评论 -
vue:使用better-scroll滑动,页面滑出问题解决。
问题回顾:每次进入该页面的时候,上拉到最后就会出现这样的问题(如图):底部都没有数据了,但是依然可以滑动,百思不得其解。但是点击tags标签后,就回复正常。代码分析:1.html<!-- 我的问题(已解答,未解答) --><template> <div class="myQuestion"> <topnav :tit...原创 2019-03-08 11:00:33 · 3758 阅读 · 0 评论 -
CSS:关于display:flex与white-space: nowrap的问题
问题再现:目前做一个列表页,具体结构如下:html: <div class="listItem"> <div class="pic"><img src=""> </div> <div class="info">原创 2018-11-27 14:06:40 · 3278 阅读 · 1 评论 -
css:标签不可点击
代码:.login .loginItem span.load{pointer-events: none;}原创 2018-10-26 11:21:27 · 6253 阅读 · 0 评论 -
Css 中括号 [ ] 的用法
span[class='test'] =>匹配所有带有class类名test的span标签 span[class *='test'] =>匹配所有包含了test字符串的class类名的span标签 span[class] =>匹配所有带有class属性的span标签 [class='all'] ...原创 2018-04-17 14:55:51 · 16453 阅读 · 0 评论 -
清除浮动的几种方式
不清除浮动会怎样?(1):背景不能显示(2):边框不能撑开(3):margin 设置值不能正确显示(4):下方内容往上移盖住浮动区域的内容html代码:<div class="container"> <div class="fl"></div> <div class="fr"></div>&转载 2018-03-20 17:58:22 · 561 阅读 · 0 评论 -
不知道自己高度和父容器高度的情况下,用 CSS 实现元素垂直居中
1.知道父元素高度,不知道子元素高度parentElement{ position:relative; } childElement{ position: absolute; top: 50%; transform: translateY(-50%); }2.Flex 布局:不考虑兼容老式浏览器的话,用Fle...原创 2018-03-20 17:53:52 · 2243 阅读 · 0 评论 -
网站怎样加载系统不自带的特殊字体?
转载地址:http://www.china125.com/design/css/4240.htm。作为网页设计师都知道网页中的HTML文字大多都会选用一些常用字体,比如“宋体”“黑体”等,因为这些字体在多数电脑中都有被安装,然而如果想用一些特殊字体的话,一般都会将这些字体转为图片,原因也是由于使用的很多字体在许多电脑中并不存在。其实解决这种字体文字并不难,本文推荐的方法就十分管用,通过CSS中转载 2018-02-01 14:12:03 · 3469 阅读 · 0 评论 -
css积累
select清除默认的方式:select { border: none; appearance:none; -moz-appearance:none; -webkit-appearance:none; padding-right: 14px;}/*清除ie的默认选择框样式清除,隐藏下拉箭头*/select::-ms-expand { display: n原创 2017-06-11 14:30:20 · 208 阅读 · 0 评论 -
设置div滚动条样式
::-webkit-scrollbar{width:14px;}/*滚动条宽度设置:宽度为0 ,当有滚动条出现的时候则不显示滚动条*/::-webkit-scrollbar-track{background-color:#fff;}/*滚动条槽背景设置*/::-webkit-scrollbar-thumb{background-color:#2db1ef; border-radius: 5原创 2017-09-21 14:03:29 · 2421 阅读 · 0 评论 -
浅谈display:flex
浅谈display:flexdisplay:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢?一、页面行排列布局像此图左右两个div一排显示可以用浮动的布局方式html部分css部分这种布局有两个缺点1.需要一个空div来清除浮动,当然也可以选用其他清除浮动的方法,但此处需要清除浮动才能不影响下面的布局。2转载 2017-06-11 19:24:49 · 266 阅读 · 0 评论