html+css常用小笔记（持续更新）

标签：了解   pre   ima   opera   border   第一个   img   web   bottom   

一、去掉input点击时的蓝色边框

outline:none;

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 二、禁止文本选中

-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"，否则可能不会生效哦~不过现代浏览器如果不是非得兼容一些老的浏览器也可以不加。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

三、CSS前缀

• Trident内核：前缀为-ms
• Gecko内核：前缀为-moz
• Presto内核：前缀为-o
• Webkit内核：前缀为-webkit

以上为四大主流内核。

Konqueror内核：前缀为-khtml-  注： 该内核并不主流，有兴趣的可以百度做了解。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

四、textarea（文本域）禁止拖拽（禁止改变大小）

有两种方式：

　　1）禁止右下的拖拽按钮。（推荐这样）

resize: none;

　　2）固定大小。（但是右下角的按钮还是有，只是拖拽不会改变大小）

width: 350px;
height: 150px;
max-width: 350px;
max-height: 150px;

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

五、块级元素背景图(background-img)拉伸填充整个元素。

    background: url("Your Image URL");
    background-repeat: no-repeat;
    background-size:100% 100%;

background-size处理auto contain cover常规值 还可以填写百分比或者尺寸。第一个值为背景图宽 第二个为背景图高。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

六、背景图超长不破坏原图比例居中对齐。

background-repeat: no-repeat;
background-position: center;

background-position设置背景图对齐方式，可以设两个值，第一个x轴 第二个y轴。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

七、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;   /*设置为高度的一半*/

适用已知尺寸元素

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 八、给table中的thead和tbody加边框。

thead和tbodytbody就这么加border是不起作用的，一般的做法都是给thead和tbody里面的tr的td加边框，显然这不是个好解决方案。

table {
    border-collapse: collapse;
}
/*把table标签的border-collapse样式设置一下，就可以给thead设置边框样式了。*/

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 九、js提起汉字(也可以提取数字，替换正则就行)

var str="怎样从一个Html页面中提取所有汉字呢？不能有其它Html代码。";  
alert(str.replace(/[^\u4e00-\u9fa5]/gi,""));  

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 十、被忽略的一组标签——分组框

<fieldset>
    <legend>组标题</legend>
    <!--内容-->
</fieldset>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

html+css常用小笔记（持续更新）

标签：了解   pre   ima   opera   border   第一个   img   web   bottom   

原文地址：http://www.cnblogs.com/MirageFox/p/5452158.html