资讯专栏INFORMATION COLUMN

前端实用资源整理

Gu_Yan / 735人阅读

摘要:事件的响应分区为三个阶段捕获目标冒泡阶段。绑定的多个事件会被覆盖,后者覆盖前者。再用转换成数值表示。如实际数量为,则展示为项目中使用过滤器做的处理可以抽取方法的,调整相关,可以获取指定位数的缩写。

CSS html5adownload属性

定义和用法
download 属性定义下载链接的地址指定下载文件的名称。文件名称没有限定值,浏览器会自动在文件名称末尾添加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)

download 属性是HTML5中新增的  标签属性。
语法 属性值 值 描述
filename 指定文件名称。

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

"download" in document.createElement("a");
1px边框(解决不同分辨率屏幕1px的宽窄不同)

缩放原理

.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)
}
隐藏移动端ios/android滚动条,使滚动流畅

隐藏滚动条,不影响滚动

::-webkit-scrollbar
  display none 

流畅滚动

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

伪元素(:或::都可以,::更准确,:兼容好)与伪类(只能:)的区别
伪类与伪元素都是用于向选择器加特殊效果

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

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

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

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

伪类标签只对可以插入内容的标签添加:div span
Vue中使用less根据分辨率给元素添加背景图片

按照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")";
    }
}

改变输入框inputtextareaplaceholder样式,去除输入框选中边框高亮
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder  {
  //设置样式
}
input:focus {    outline:none;}  /*  focus 标记*/ 

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

sticky 属性

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

flex布局属性中inline-flex

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

JS addEventListener VS onclick孰优孰劣

两个都可以实现效果。
addEventListener 以及 IEattachEvent可以实现绑定多个事件,如果你有这方面的需求的话(奇怪的是你总会的)。
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 这里解析一下