前端实用资源整理

检测浏览器是否支持download属性

"download" in document.createElement("a");

缩放原理

.border-1px {
  position relative
}
.border-1px:after {
    display block
    content ""
    position absolute
    left 0
    bottom 0
    width 100%
    border-top 1px solid #ccc
 }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) .border-1px::after {
      transform scaleY(0.7)
      -webkit-transform scaleY(0.7)
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
  .border-1px::after {
      transform scaleY(0.5)
      -webkit-transform scaleY(0.5)
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
  .border-1px::after {
      transform scaleY(0.3333)
      -webkit-transform scaleY(0.3333)
}

隐藏滚动条，不影响滚动

::-webkit-scrollbar
  display none 

流畅滚动

    //在滚动元素`css`中添加
 -webkit-overflow-scrolling touch // IOS系统
    overflow-scrolling touch // 安卓系统

伪类与伪元素都是用于向选择器加特殊效果

伪类与伪元素的本质区别就是是否抽象创造了新元素

伪类只要不是互斥可以叠加使用

伪元素在一个选择器中只能出现一次，并且只能出现在末尾

伪类与伪元素优先级分别与类、标签优先级相同

伪类标签只对可以插入内容的标签添加：div span

按照less官方文档，url应当如下使用：

URLs
// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

故而有了根据屏幕分辨率设置背景图片代码

.bg-image(@url) {
  background-image: url("@{url}@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image: url("@{url}@3x.png");
  }
}  // 报错报错 找不到路径的

这里要使用“~”符号来告诉less引号里面的内容不需要编译。

正确代码：

.bg-image(@url) {
    background-image:~"url("@{url}@2x.png")";
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: ~"url("@{url}@3x.png")";
    }
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder  {
  //设置样式
}
input:focus {    outline:none;}  /*  focus 标记*/ 

（原谅我一直没找很完善的reset.css,这些在一些重置样式文件自带的有，大家有好的完善的也可以告知我一下 ）

在使用 position: sticky 的时候，如果不指定 top 属性是不会有效果的。
这个属性是用来实现滚动吸顶的，具体可了解position。

inline-flex 和 inline-block 一样，对内部元素来说是个 display:flex 的容器，对外部元素来说是个 inline-block 的块

两个都可以实现效果。
addEventListener 以及 IE 的 attachEvent可以实现绑定多个事件，如果你有这方面的需求的话（奇怪的是你总会的）。
addEventListener的第三个参数可以用来控制监听器对于冒泡事件的响应，大部分情况是false，如果置为true，则响应事件的捕获阶段。事件的响应分区为三个阶段 ：捕获、目标、冒泡阶段。
onclick绑定的多个事件会被覆盖，后者覆盖前者。
考虑到兼容ie，可以写一个原生的事件绑定兼容方案：

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent("on"+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// example
addEvent(
    document.getElementById("myElement"),
    "click",
    function () { alert("hi!"); }
);

参考链接：addEventListener 与 onclick

//代码来源：https://www.jb51.net/article/120617.htm 这里解析一下