css技巧100个(css小技巧汇总)
类别:Web前端 浏览量:2726
时间:2022-01-26 01:29:02 css技巧100个
css小技巧汇总1、去除input记住密码后自动填充表单的黄色背景
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; } //其中#fff是背景颜色值
2、IE8不支持opacity:0属性,可以加上下面属性:
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
3、IE input 框去掉文本框的叉叉和密码输入框的眼睛图标:
::-ms-clear,::-ms-reveal{display:none;}
4、textarea属性
resize:none; //去除大小拖动 outline:none; //去除黄色边框
5、判断是否满足正则表达式要正确书写方式
正则.test(要满足的那个val值)
6、单行文本省略
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
7、当样式表里font-size 小于 12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用:
html{-webkit-text-size-adjust:none;}
8、解决xmp标签不自动换行:
xmp { whitewhite-space: pre-wrap; /* css-3 */ whitewhite-space: -moz-pre-wrap; /* Mozilla, since 1999 */ whitewhite-space: -pre-wrap; /* Opera 4-6 */ whitewhite-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ white-space: pre-wrap; /* Firefox */ }
9、object高度为0不生效的解决方法
在其外层添加一个li,让这个li的高度为0,或者font-size为0
<li style="height:0"> <object object width="0" height="0" ></object> </li>
10、input框
消除input的记忆功能:在input框里面加:autocomplete="off" input里面的内容防止复制:oncopy="return false;" oncut="return false;" input里面的内容取消粘贴:onpaste="return false" input里面的内容取消选取、防止复制 :<body onselectstart="return false">
11、全屏遮罩代码段(fixed是相对视窗)
<li class="mask"></li> .mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;}
12、display: none与visibility:hidden的区别:
display: none; 不显示,不占据空间 visibility: hidden; 不显示,占据空间
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持开心学习网!
您可能感兴趣
- dedecms标签使用技巧(dedecms友情链接标签flink使用说明及实例代码)
- dedecms怎么判断授权(DedeCms模板防盗以及安全设置的一些小技巧)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- 微信小程序开发如何实现自动保存(微信小程序开发实用技巧之数据传递和存储)
- mysql变量技巧(mysql用户变量与set语句示例详解)
- vue封装组件技巧(浅谈vue中所有的封装方式总结)
- apache和php如何配置(Apache2与PHP5 for WinXP简单配置技巧)
- laravel 快速开发api技巧(Laravel5.4简单实现app接口Api Token认证方法)
- sql优化100个技巧(52条SQL语句教你性能优化)
- 织梦dedecms建站的核心经验和技巧(dedecms 伪静态重写设置修改方法)
- 谷歌浏览器调试模式下搜索小技巧
- dedecms栏目标签的语法(dede中当前栏目选择技巧及注意事项)
- htaccess伪静态配置(16个简单实用的.htaccess使用技巧)
- laravel模型使用技巧(提高Laravel应用性能方法详解)
- mysql 高效分页(MySQL 分页查询的优化技巧)
- vue项目步骤(Vue项目中常用的实用技巧汇总)
- 红色代表什么(红色代表什么情感和含义)
- 高中数学题(高中数学题型总结及解题方法)
- 冰岛旅游攻略(冰岛旅游攻略及花费)
- 为什么现在年轻人越来越喜欢买衣服(为什么现在年轻人越来越喜欢买衣服穿)
- 怎么做好SEO(怎么做好seo内容优化)
- 冬季钓鱼子线用 长 还是 短(冬季钓鱼子线用)
热门推荐
- 如何激活ubunturoot账号(欧洲vps安装Ubuntu系统如何设置root登录)
- thinkphp表单提交不到数据(ThinkPHP5.1表单令牌Token失效问题的解决)
- react事件绑定的方式和区别(react合成事件与原生事件的相关理解)
- mysql limit越大越慢(MySQL limit分页大偏移量慢的原因及优化方案)
- socket和tcp什么关系(TCP socket SYN队列和Accept队列区别原理解析)
- react实现js控制样式(React + Threejs + Swiper 实现全景图效果的完整代码)
- phpfpm优化方法(php-fpm超时时间设置request_terminate_timeout资源问题分析)
- 如何用thinkphp框架来写一个网站(php tpl模板引擎定义与使用示例)
- idea配置mysql最大连接数(IDEA连接不上MySQL端口号占用的解决)
- 织梦dedecms优化安全设置指南(DedeCms V5.5 性能优化方法分享)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9