html5+css+javascript常用总结

1,单行和多行省略...

单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

2,自定义设置placeholder样式

input::-webkit-input-placeholder {
    color: #999;     
}
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #999;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #999;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #999;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #999;
}

3,jquery 点击元素以外任意地方隐藏该元素的方法(事件冒泡)

<script type="text/javascript">
        $(document).click(function () {
            alert("测试");
        });

        $(".ceshi").click(function (event) {
            event.stopPropagation();
        });
</script>

4,pointer-events:none; 可以让某个元素实现类似于海市蜃楼的效果,具体理解为,你可以看的到某个元素,但是你无法摸的着。

5,小程序使用字体图标操作步骤

小程序使用字体图标
操作步骤:
http://www.wxappclub.com/topic/1843

字体图标网址:
https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3

字体图标生成网址:
https://icomoon.io/app/#/select

转换网址:
https://transfonter.org/

6,web端的变灰只要一行代码

html标签加上

-webkit-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);

7,页面导入样式时,使用link和@import有什么区别?

link属于HTML标签,而@import是css提供的;

页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完再加载;

@import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;

link方式的样式的权重高于@import的权重。