成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端實(shí)用資源整理

wslongchen / 2383人閱讀

摘要：事件的響應(yīng)分區(qū)為三個(gè)階段捕獲目標(biāo)冒泡階段。綁定的多個(gè)事件會(huì)被覆蓋，后者覆蓋前者。再用轉(zhuǎn)換成數(shù)值表示。如實(shí)際數(shù)量為，則展示為項(xiàng)目中使用過(guò)濾器做的處理可以抽取方法的，調(diào)整相關(guān)，可以獲取指定位數(shù)的縮寫。

CSS html5中a的download屬性

定義和用法
download 屬性定義下載鏈接的地址或指定下載文件的名稱。文件名稱沒(méi)有限定值，瀏覽器會(huì)自動(dòng)在文件名稱末尾添加該下載文件的后綴 (.img, .pdf, .txt, .html, 等)。

download 屬性是HTML5中新增的  標(biāo)簽屬性。
語(yǔ)法 屬性值 值 描述
filename 指定文件名稱。

檢測(cè)瀏覽器是否支持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)
}
隱藏移動(dòng)端ios/android滾動(dòng)條，使?jié)L動(dòng)流暢

隱藏滾動(dòng)條，不影響滾動(dòng)

::-webkit-scrollbar
  display none

流暢滾動(dòng)

    //在滾動(dòng)元素`css`中添加
 -webkit-overflow-scrolling touch // IOS系統(tǒng)
    overflow-scrolling touch // 安卓系統(tǒng)
偽元素（:或::都可以，::更準(zhǔn)確，:兼容好）與偽類(只能:)的區(qū)別 
偽類與偽元素都是用于向選擇器加特殊效果

偽類與偽元素的本質(zhì)區(qū)別就是是否抽象創(chuàng)造了新元素

偽類只要不是互斥可以疊加使用

偽元素在一個(gè)選擇器中只能出現(xiàn)一次，并且只能出現(xiàn)在末尾

偽類與偽元素優(yōu)先級(jí)分別與類、標(biāo)簽優(yōu)先級(jí)相同

偽類標(biāo)簽只對(duì)可以插入內(nèi)容的標(biāo)簽添加：div span
Vue中使用less根據(jù)分辨率給元素添加背景圖片

按照less官方文檔，url應(yīng)當(dāng)如下使用：

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

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

故而有了根據(jù)屏幕分辨率設(shè)置背景圖片代碼

.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");
  }
}  // 報(bào)錯(cuò)報(bào)錯(cuò) 找不到路徑的
這里要使用“~”符號(hào)來(lái)告訴less引號(hào)里面的內(nèi)容不需要編譯。

正確代碼：

.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，textarea的placeholder樣式，去除輸入框選中邊框高亮 
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder  {
  //設(shè)置樣式
}
input:focus {    outline:none;}  /*  focus 標(biāo)記*/

（原諒我一直沒(méi)找很完善的reset.css,這些在一些重置樣式文件自帶的有，大家有好的完善的也可以告知我一下 ）

sticky 屬性

在使用 position: sticky 的時(shí)候，如果不指定 top 屬性是不會(huì)有效果的。
這個(gè)屬性是用來(lái)實(shí)現(xiàn)滾動(dòng)吸頂?shù)模唧w可了解position。

flex布局屬性中inline-flex

inline-flex 和 inline-block 一樣，對(duì)內(nèi)部元素來(lái)說(shuō)是個(gè) display:flex 的容器，對(duì)外部元素來(lái)說(shuō)是個(gè) inline-block 的塊

JS addEventListener VS onclick孰優(yōu)孰劣

兩個(gè)都可以實(shí)現(xiàn)效果。
addEventListener 以及 IE 的 attachEvent可以實(shí)現(xiàn)綁定多個(gè)事件，如果你有這方面的需求的話（奇怪的是你總會(huì)的）。
addEventListener的第三個(gè)參數(shù)可以用來(lái)控制監(jiān)聽(tīng)器對(duì)于冒泡事件的響應(yīng)，大部分情況是false，如果置為true，則響應(yīng)事件的捕獲階段。事件的響應(yīng)分區(qū)為三個(gè)階段 ：捕獲、目標(biāo)、冒泡階段。
onclick綁定的多個(gè)事件會(huì)被覆蓋，后者覆蓋前者。
考慮到兼容ie，可以寫一個(gè)原生的事件綁定兼容方案：

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

圖片上傳按鈕以及預(yù)覽（轉(zhuǎn)載+解析） 
//代碼來(lái)源：https://www.jb51.net/article/120617.htm 這里解析一下