记录以前不知道的web细节

移除event.preventDefault()


  1. 如果一个事件中有时需要调用event.preventDefault()取消浏览器默认事件,有时又不需要调用
  2. 比如自定义滚动条,当滚动条还没有滚动到最顶端或者最底端时,需要调用event.preventDefault()取消浏览器默认事件,不然会出现自定义滚动条和最外层document的滚动条同时滚动
  3. 而当滚动条滚动到最顶端或者最底端时,自定义滚动条已经不能滚动了,则需要让最外层document的滚动条滚动,便需要移除event.preventDefault()
  4. 解决方法便是取消当前事件的绑定,示例代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var f=function(e) {
    // ...
    // 滚动到最大最小时,重新绑定事件,相当于移除preventDefault
    if(that.current >= that.maxCurrent || that.current <= 0){
    that.wrapEl.off("mousewheel DOMMouseScroll", f).on("mousewheel DOMMouseScroll", f);
    }else{
    e.preventDefault();
    }
    }
    this.wrapEl.on("mousewheel DOMMouseScroll", f); // 给dom添加滚动事件
  5. 滚动条示例

css margin百分比


  1. 可以对margin设置百分比,但是是相对于父元素的宽度的百分比,示例代码:

    1
    2
    3
    4
    5
    // div {width: 400px;height: 200px;outline: 1px solid #ccc}
    // p{margin: 10%;display: inline-block;padding: 10%}
    <div>
    <p>aaa</p>
    </div>
  2. 设置如上则可以看到p的margin全部为40px,而不是左右40px上下20px,padding同理
    margin百分比

css line-height百分比和数字值的区别


  1. line-height设置数字值时,子元素会继承这个数字,所以子元素的line-height值为这个数字乘以子元素的font-size
  2. line-height设置百分比时,元素会先计算出值,即百分比乘以元素的font-size,然后把这个值继承给子元素
  3. 示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // div {width: 400px;height: 200px;outline: 1px solid #ccc;font-size: 30px;}
    // p{margin: 0;display: inline-block;padding: 0;background: #ddd;font-size:15px;}
    // .test1{line-height: 150%;}
    // .test2{line-height: 1.5;}

    // p的line-height为:150% * 30
    <div class="test1">
    <p>aaa</p>
    </div>
    // p的line-height为:1.5 * 15
    <div class="test2">
    <p>aaa</p>
    </div>
  4. 结果如图:
    line-height百分比和数字值的区别

js判断进入当前页面的方式


performance.navigation.type

  1. 如果等于0,则为直接进入页面
  2. 如果等于1,则是在本页面刷新进入的
  3. 如果等于2,则是通过后退进入本页面的

表格边框css属性


border-collapse:CSS 属性是用来决定表格的边框是分开的还是合并的。

  1. separate: 分隔模式(默认),在分隔模式下,相邻的单元格都拥有独立的边框。
  2. collapse: 合并模式,在合并模式下,相邻单元格共享边框。

border-spacing:指定相邻单元格边框之间的距离(只适用于 separate分隔模式 )。

0%