前端黑魔法之css3以及h5

1.对于超出文本域的文字处理，使用省略号处理(属于css3属性)：

　　　overflow:hidden;
　　　text-overflow:ellipsis;
　　　-o-text-overflow:ellipsis;
　　　white-space:nowrap;
　　　width:100%;

2.a标签：行内元素 

注意：1.使用时a标签嵌套在块元素外，需要将a设置为block元素；

 2.a标签内再嵌套a标签，浏览器解析时不再嵌套，如“<a>哈哈<a>呵呵</a></a>”，解决方案：<a>哈哈<object><a>呵呵</a></object></a>,上面的效果在IE9+、Firefox4+、Opera9+、Safari5.1+、Chrome14+都可以完整运行，如果在在旧版本IE浏览器上要有效果的话，需要在<object>标签内添加一个注释；

3.img 图片被压缩

解决方案：1.设置img的“object-fit”属性实现图片裁剪："object-fit"的参数：object-fit:fill | contain | cover | none | scale-down

4.去掉文本框鼠标聚集时蓝色的阴影

解决方法：{outline:none;}

5.去掉文本框，下拉列表的默认样式

解决方法：{-webkit-appearance:none;appearance:none;}

6.pointer-events:none 使用技巧：不只是禁用链接hover，打开链接等效果，是真实意义上的将onlick事件去掉了

7.设置文本框的placeholder文字距离文本框左边的距离可以通过设置padding-left;

8.限制textarea的字符长度，通过maxlength="100"设置

9.移动端使用动画时的技巧(启用GPU)：

9.1设置transform:translateZ(0);

9.2设置transform:translate(0,0,0);

10.清除浮动常用方法：

.fl{float:left;}.fr{float:right;}.clearfix:after{display:block;content:".";height:0;visibility:hidden;clear:both;}.clearfix{*zoom:1;}

11.resize(css3属性) ：实现元素尺寸的拉伸收缩，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll

none|both|horizontal|vertical;

-webkit-resize: horizontal;  -moz-resize: horizontal;  -o-resize: horizontal;  -ms-resize: horizontal;  resize: horizontal;

12.currentColor属性：css变量， color 属性的值，具体意思是指：currentColor关键字的使用值是 color 属性值的计算值。

css-tricks/currentColor

css88/currentColor

参考资料：前端黑魔法,object-fit属性的讲解

13.table布局时，可以使用多个tbody，在合并多行时，td除了需要用rowspan属性，还需要判断td是不是第一个