flex布局和float布局混用导致float失效
-
描述：在父元素display:flex情况下，子元素使用float，会发现子元素原地不动，既没有覆盖前面的子元素，也不会按照float的规则布局
-
解决：给这个使用float的子元素添加margin-left: auto(我也不知道为啥)
overflow导致盒子外的before消失
- 描述：盒子加了overflow:hidden，盒子本身自带::before，但是这个before定位在盒子外面，这个时候before就被overflow给hidden了
- 解决：当前盒子依然overflow，给当前盒子加个父级box，before移到父级盒子上。
table表格td宽度不生效
- 描述：在table下thead里的th设置了宽度，希望这一整列都是保持这个宽度，然后给tbody里的td设置了文字超出宽度部分...，但是并不起作用，文字太长的时候，整列会被拉长
- 解决：给table添加一个table-layout:fixed。
dom事件问题
<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>
- 上述代码，打开浏览器会立刻在控制台输出1，而不是点击dom标签再输出
-
-
<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是当前作用域的this，即window，而不是box，所以这里不用this而用box
注意：该方法使用bind会占用更多内存，不建议使用，详见JS函数之不要随便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函数内部的this指向box，即不需要再改变this指向
removeEventListener
- addEventListener和removeEventListener要求方法名相同，否则无法removeEventListener
-
css样式!important不生效
- color是一个可以继承的属性，也就是如果内部的元素找不到color就从外面一层层找出去，
<style>
.box {
width: 200px;
height: 200px;
background: yellow;
color: red !important;
}
</style>
<div class ="box">
<p>红红火火恍恍惚惚</p>
<p style="color: blue;">啊啊啊啊啊啊啊啊啊</p>
</div>
结果如下
!important仅作用于box上的color，不决定box内部设置了style的p的color。
niceScroll插件位置不对
- 描述：给歌词添加niceScroll，但是滚动条总时出现在歌词所在盒子的左侧，只有页面resize的时候才恢复正常
- 解决：因为歌词页面存在从左下角开始，宽变为100vw，高变为100%，transition=0.5s，所以要再设置niceScroll的时候添加一个0.5s的定时器。
space-between等属性最后一行居中
-描述：使用justify-content的space-between等属性，如果最后一样标签放不满，那么标签会奇怪的显示，而不是从左边开始摆列。
-解决：给添加了justify-content的标签加上一个::after{content:'',width:子元素宽度(包括margin)}，这个伪元素会占下空白的地方。
操作dom，页面输出[object Promise]
- 描述，见代码
$(function(){
let a = b()
})
async function b(){
let res = await GET(...')
let str = ''
res.forEach(r => {
//下面用模板字符串对str用res返回的数据写html
str += ...
})
return str
}
完事后，页面上显示[object Promise]
- 解决：异步async调用b函数，即let a = async b()
自定义属性不支持大写
- 描述：我给一个标签添加了自定义属性data-playListId，然后在js内的使用dataset.playListId，结果为undefined
- 解决：改变标签的自定义属性为data-playlist-id，然后在js内使用dataset.playlist-id即可获取，因为html属性和标签名大小写不敏感，全大写也会变回小写
