1
去掉input点击时的蓝色边框
outline:none;
2
禁止文本选中
-webkit-touch-callout: none; /* iOS Safari */-webkit-user-select: none; /* Chrome/Safari/Opera */-khtml-user-select: none; /* Konqueror */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer/Edge *//*说明:该属性不加前缀不支持目前所有浏览器*/user-select: none; /* Non-prefixed version, currently not supported by any browser */
注意:
在 IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性
unselectable="on",否则可能不会生效哦~不过现代浏览器如果不是非得兼容一些老的浏览器也可以不加。
3
CSS前缀
- Trident内核:前缀为
-ms
- Gecko内核:前缀为
-moz
- Presto内核:前缀为
-o
- Webkit内核:前缀为
-webkit
以上为四大主流内核。
Konqueror内核:前缀为-khtml- 注: 该内核并不主流,有兴趣的可以做了解。
4
textarea(文本域)禁止拖拽(禁止改变大小)
有两种方式:
1)禁止右下的拖拽按钮。(推荐这样)
resize: none;
2)固定大小。(但是右下角的按钮还是有,只是拖拽不会改变大小)
width: 350px;height: 150px;max-width: 350px;max-height: 150px;
5
块级元素背景图(background-img)拉伸填充整个元素
background: url("Your Image URL"); background-repeat: no-repeat; background-size:100% 100%;
background-size处理auto contain cover常规值 还可以填写百分比或者尺寸。第一个值为背景图宽 第二个为背景图高。
6
背景图超长不破坏原图比例居中对齐
background-repeat: no-repeat;background-position: center;
background-position设置背景图对齐方式,可以设两个值,第一个x轴 第二个y轴。
7
absolute元素居中(水平,垂直居中)
方法一
margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
适用未知尺寸元素。
方法二
position:absolute;width:200px;height:400px;left:50%;top:50%;margin-left:-100px; /*设置为宽度的一半*/margin-top:-200px; /*设置为高度的一半*/
适用已知尺寸元素
8
给table中的thead和tbody加边框
thead和tbodytbody就这么加border是不起作用的,一般的做法都是给thead和tbody里面的tr的td加边框,显然这不是个好解决方案。
table { border-collapse: collapse;}/*把table标签的border-collapse样式设置一下,就可以给thead设置边框样式了。*/
9
js提取汉字(也可以提取数字,替换正则就行)
var str="怎样从一个Html页面中提取所有汉字呢?不能有其它Html代码。"; alert(str.replace(/[^\u4e00-\u9fa5]/gi,""));
10
被忽略的一组标签——分组框