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不生效的解决方法

在其外层添加一个div,让这个div的高度为0,或者font-size为0
<div style="height:0">
   <object object width="0" height="0" ></object>
</div>

10、input框

消除input的记忆功能:在input框里面加:autocomplete="off"
input里面的内容防止复制:oncopy="return false;" oncut="return false;"
input里面的内容取消粘贴:onpaste="return false"
input里面的内容取消选取、防止复制 :<body onselectstart="return false">

11、全屏遮罩代码段(fixed是相对视窗)

 <div class="mask"></div>
 .mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;}

12、display: none与visibility:hidden的区别:

display: none; 不显示,不占据空间visibility: hidden; 不显示,占据空间
时间: 2024-10-14 13:32:52

css小技巧,会不断更新的的相关文章

CSS小技巧

CSS 小技巧 总结的网络上的资源,以备自己后续参考... 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框… /* 添加边框 */ .nav li { border-right: 1px

css小技巧(1)

1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selection 选中文字时文字颜色和选中色 <!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-s

Css 小技巧总结

相对偏移 指定left top等属性就能够够完美控制一个元素的位置 如: position:relative; left:2px; 今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会把另一个框顶到下一行,这个时候就可以用margin-right:-2px;将右外距设置为负数来解决! css写表达式控制图片大小,当图片大小大于某一数值时,强制设置其宽 高为指定大小. img { max-width: 163px; width:expression(this.width > 163

前端开发者应该知道的 CSS 小技巧

一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框… CSS 1 2 3 4 5 /* 添加边框 */ .nav li { border-right: 1p

[原创][FPGA]Quartus实用小技巧(长期更新)

0. 简介 在使用Quartus软件时,经常会时不时的发现一些小技巧,本文的目的是总结所查阅或者发现到的小技巧,本文长期更新. 1. Quartus中的模板功能 最近在Quartus II的菜单里找到了一个好去处:language template. 在Edit -> Insert Template下可以看到Verilog HDL.SystemVerilog.VHDL.AHDL.Quartus II TCL.TCL的语言模板. 在Verilog HDL下面,可以找到基本的逻辑操作符.基本语言结构

sourceInsight使用小技巧汇总--持续更新中

作为测试人员,读各种平台的工程代码时,根本不想安装各种vs或者eclipse等,于是,就找了一款代码阅读工具. sourceInsight,下载地址为官网:http://www.sourceinsight.com/ 那么,问题就来了,sourcinsight的界面风格呀,真真不习惯,而且打开代码文件的时候没有文件标签. 于是,就百度呀 总结一些设置小技巧 设置前打开新建project后打开时这样的 一. Source Insight中文字体设置 Source Insight是一个面向项目开发的程

HTML+CSS - 前端设计的小技巧(持续更新......)

2015年7月6日20:28:20 1.设置文字的居中,非控件内的. :text-alain:center 2.图片在ASP.NET中,可以直接拖放到界面,自动形成img控件. 3.CSS直接在全局样式  *  内,设置UL标签无样式,图片无边框,margin和padding都为0. 4.取消浮动Clear. :clear:left   取消左浮动 5.图片按钮   ImageButton控件 SRC属性,设置图片的路径. 6.服务器空间,在网页中也是input控件,所以,直接设置input属性

作为一枚web前端开发工程师 这些CSS 小技巧你值得掌握

http://web.jobbole.com/85142/ 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框- CSS 1 2 3 4 5 /* 添加边框 */ .nav li { bor

前端知识 | CSS小技巧-自适应椭圆

背景知识: border-radius 属性的基本用法. 难题: 你可能注意到过,给任何正方形元素设置一个足够大的 border-radius,就可以把它变成一个圆形.所用到的 CSS 代码如下所示: 图1.1给元素设置固定宽高以及一半长度的 border-radius,可以得到一个圆形 你可能还注意到了,如果指定任何大于 100px 的半径,仍然可以得到一个圆形.规范特别指出了这其中的原因: "当任意两个相邻圆角的半径之和超过 borderbox 的尺寸时,用户代理必须按比例减小各个边框半径所