flex布局和float布局混用導(dǎo)致float失效

• 描述：在父元素display:flex情況下，子元素使用float，會(huì)發(fā)現(xiàn)子元素原地不動(dòng)，既沒(méi)有覆蓋前面的子元素，也不會(huì)按照f(shuō)loat的規(guī)則布局

  
  

• 解決：給這個(gè)使用float的子元素添加margin-left: auto(我也不知道為啥)

  
  

overflow導(dǎo)致盒子外的before消失

• 描述：盒子加了overflow:hidden，盒子本身自帶::before，但是這個(gè)before定位在盒子外面，這個(gè)時(shí)候before就被overflow給hidden了
• 解決：當(dāng)前盒子依然overflow，給當(dāng)前盒子加個(gè)父級(jí)box，before移到父級(jí)盒子上。

table表格td寬度不生效

• 描述：在table下thead里的th設(shè)置了寬度，希望這一整列都是保持這個(gè)寬度，然后給tbody里的td設(shè)置了文字超出寬度部分...，但是并不起作用，文字太長(zhǎng)的時(shí)候，整列會(huì)被拉長(zhǎng)
• 解決：給table添加一個(gè)table-layout:fixed。

dom事件問(wèn)題

<div class ="box"></div>
<script>
    function a(c) {
        console.log(c);
    }
    let box = document.getElementsByClassName('box')[0]
    let c = 1
    box.addEventListener('click',a(c))   
</script>

• 上述代碼，打開(kāi)瀏覽器會(huì)立刻在控制臺(tái)輸出1，而不是點(diǎn)擊dom標(biāo)簽再輸出
• 
  
• 
  
  

<script>
    function a(c) {
        console.log(c);
    }
    let box = document.getElementsByClassName('box')[0]
    let c = 1
    box.addEventListener('click',a.bind(box,c)) 
</script>

注意：bind里面如果傳遞this，this是當(dāng)前作用域的this，即window，而不是box，所以這里不用this而用box
注意：該方法使用bind會(huì)占用更多內(nèi)存，不建議使用，詳見(jiàn)JS函數(shù)之不要隨便bind

<script>
    function a(c) {
        return function() {
            console.log(c);
        }
    }
    let box = document.getElementsByClassName('box')[0]
    let c = 1
    box.addEventListener('click',a(c)) 
</script>

這種方法，a函數(shù)內(nèi)部的this指向box，即不需要再改變this指向

removeEventListener

• addEventListener和removeEventListener要求方法名相同，否則無(wú)法removeEventListener
• 
  
  

css樣式!important不生效

• color是一個(gè)可以繼承的屬性，也就是如果內(nèi)部的元素找不到color就從外面一層層找出去，
  

<style>
    .box {
        width: 200px;
        height: 200px;
        background: yellow;
        color: red !important;
    }
</style>
<div class ="box">
    <p>紅紅火火恍恍惚惚</p>
    <p style="color: blue;">啊啊啊啊啊啊啊啊啊</p>
</div>

結(jié)果如下

!important僅作用于box上的color，不決定box內(nèi)部設(shè)置了style的p的color。

niceScroll插件位置不對(duì)

• 描述：給歌詞添加niceScroll，但是滾動(dòng)條總時(shí)出現(xiàn)在歌詞所在盒子的左側(cè)，只有頁(yè)面resize的時(shí)候才恢復(fù)正常
• 解決：因?yàn)楦柙~頁(yè)面存在從左下角開(kāi)始，寬變?yōu)?00vw，高變?yōu)?00%，transition=0.5s，所以要再設(shè)置niceScroll的時(shí)候添加一個(gè)0.5s的定時(shí)器。

space-between等屬性最后一行居中

-描述：使用justify-content的space-between等屬性，如果最后一樣標(biāo)簽放不滿，那么標(biāo)簽會(huì)奇怪的顯示，而不是從左邊開(kāi)始擺列。
-解決：給添加了justify-content的標(biāo)簽加上一個(gè)::after{content:'',width:子元素寬度(包括margin)}，這個(gè)偽元素會(huì)占下空白的地方。

操作dom，頁(yè)面輸出[object Promise]

• 描述，見(jiàn)代碼

$(function(){
    let a = b()
})

async function b(){
    let res = await GET(...')
    let str = ''
    res.forEach(r => {
        //下面用模板字符串對(duì)str用res返回的數(shù)據(jù)寫(xiě)html        
        str += ...
    })
    return str
}

完事后，頁(yè)面上顯示[object Promise]

• 解決：異步async調(diào)用b函數(shù)，即let a = async b()

自定義屬性不支持大寫(xiě)

• 描述：我給一個(gè)標(biāo)簽添加了自定義屬性data-playListId，然后在js內(nèi)的使用dataset.playListId，結(jié)果為undefined
• 解決：改變標(biāo)簽的自定義屬性為data-playlist-id，然后在js內(nèi)使用dataset.playlist-id即可獲取，因?yàn)閔tml屬性和標(biāo)簽名大小寫(xiě)不敏感，全大寫(xiě)也會(huì)變回小寫(xiě)