By

文章目录

    这里记录的是在练习百度的2016IFE任务时的笔记，因为是边学边记所以也比较零散，仅供自己平日记录。

  1. 左侧固定右侧自适应

    1
    2
    3
    4
    5
    6
    7
    .left{
       width:200px;
       float:left;
    }
    .right{
       margin-left:200px;
    }

  2. 右侧固定左侧自适应

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .left{
        margin-right:200px;
    }
    .right{
      position:absolute;
      top:0;
      right:0;
      width:200px;
    }

  3. 清除浮动—1
    浮动
    子元素因为浮动使得子元素的高度大于父元素的高度，即造成父元素塌陷。

    方法一： 在父元素上添加

    1
    2
    3
    4
    .clear{
       overflow:auto;
       zoom:1;//兼容 IE6
    }

    清除浮动后原来在父容器上面添加的padding margin 对于子元素仍是适用的。
    这种方法当子元素中的子元素变大时会使得父元素出现滚动条

    清除浮动—2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .clearfix{
      &:after{
        content: "";
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
      }
    }

    这种方法不会出现滚动条，但当子元素的子元素变大的时也可能会破坏布局

  4. 首字母大写 :first-letter{ font-size:22px;}
    font: 多个属性一起使用是有顺序的。
    字体倾斜：font-style:italic; 对于没有斜体变量的特殊字体应使用 oblique;
    实现首字母大写并下沉样式：

    1
    2
    3
    4
    5
    &:first-letter{
      font-size:70px;
      margin:30px 10px 20px 0;
      float:left;
    }

    通过设置字号，float并配合margin来进行定位。

  5. 伪类设置双引号 content:open-quote;配合定位;

    1
    2
    3
    4
    5
    6
    &::before{
          content: open-quote;
        	position:relative;
          left:20px;
          top:20px;
        }

  6. 水平导航目录: ul+inline-block+absolute;

  7. 多个元素使用inline-block 布局时，当内部元素变大时，其他兄弟元素会错位，这个问题使用float:left;解决(问题见原生JS–110.html)

  8. 只在父元素上使用mouseover 与mouseout事件就想使得子元素出现和消失的结果，这会出现鼠标在子元素上移动时会闪个不停。。。
    因为这会在连续触发父元素（问题见 原生js-110.html）
    解决办法： 在父元素上使用 mouseover使得 子元素一进入就出现，在 子元素上使用mouseout 使得子元素消失。若是这时子元素内容变大使得子元素不能再触发，可以将子元素内容设置成背景图片（针对图片的情形），这时应考虑好DOM结构。

  9. 原生JS关于事件处理的套路：
    在父元素上添加事件监听，在点击子元素时，会有事件冒泡，所以父元素上的事件监听肯定会监听到，然后在父元素的事件监听处理函数中判断是否是在子元素上，这时当然会用到event.target。

    1
    2
    3
    4
    5
    6
    7
    8
    function delegateEvent(delegateElement, targetTag, eventName, handler) {
      delegateElement.addEventListener(eventName, function(event) {
        var target = event.target;
        if (targetTag.toLowerCase() === target.nodeName.toLowerCase()) {
          return handler(event);
        }
      }, false);
    }
文章目录