Rumah > Artikel > hujung hadapan web > css小技巧汇总
css小技巧汇总
- 巴扎黑asal
- 2017-05-21 10:42:391621semak imbas
本文主要对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不生效的解决方法
在其外层添加一个p，让这个p的高度为0，或者font-size为0
<p style="height:0"> <object object width="0" height="0" ></object> </p>
10、input框
消除input的记忆功能：在input框里面加：autocomplete="off" input里面的内容防止复制：oncopy="return false;" oncut="return false;" input里面的内容取消粘贴：onpaste="return false" input里面的内容取消选取、防止复制 :<body onselectstart="return false">
11、全屏遮罩代码段(fixed是相对视窗)
<p class="mask"></p>
.mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;}12、display: none与visibility:hidden的区别：
display: none; 不显示，不占据空间 visibility: hidden; 不显示，占据空间
Atas ialah kandungan terperinci css小技巧汇总. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：详解CSS中的display:flex||inline-flex属性Artikel seterusnya：深入理解CSS系列之flex兼容