13天总结

Author Avatar
芝士君 3月 08, 2017
  • 在其它设备中阅读本文章

前言

从2.24开始到今天3.8已经13天时间了,ife上完成了17个普通任务,做一波小总结,理清在任务中初次遇到或者之前没怎么使用的一些知识。


前些天在看<求婚大作战>,特别喜欢这部片子,安利大家

重点

  • transition(过渡属性)

    div { transition: left 1s 0.4s ease-in-out}
    

    表示该div的left属性延迟1秒后会在0.4秒的时间内,以ease-in-out(以慢速开始和结束)的过渡效果进行变化
    通常搭配:hover伪类使用
    transition通常属性值都是一齐使用,所以没必要去记住子属性。
    下面是单纯用transition属性实现的导航栏下划线移动效果

    See the Pen anime-nav by cheesekun (@cheesekun) on CodePen.


    上述效果还使用了~子类选择器
    举例: a ~ div
    表示同个父元素下 <a>之后的所有<div>被选择

  • 响应式

    这个题目撞到挺多有趣的问题
    主要使用了@meadia媒体查询属性

    @media only screen and (min-width: 768px) and (max-width: 1024px)
    

    表示仅当screen(输出设备可浏览宽度)最小值为768px,最大值为1024px时实现

    See the Pen 响应式12栏 by cheesekun (@cheesekun) on CodePen.

    上面的例子我一开始是使用inline-block,后来发现inline-block有个弊端,会受默认字体宽度影响,并且处理方式极其奇葩,如果想实现无缝衔接inline-block还是算了,乖乖使用float: left

    看张鑫旭大神解决inline-block间距的方法链接

    并且使用了css3中的calc()来进行值的计算

    div {width: calc(50% - 40em);}
    

    上述div在我们不知道父元素的50%是多大的时候,我们可以直接使用calc(),将这个烦人的计算交给浏览器
    表达式中有“+”和“-”时,其前后必须要有空格,否则报错
    box-sizing属性特别好用

    { box-sizing: border-box;}
    

    可以直接把该divborder,padding值直接并入到width,这样对布局宽度更加直观。
    box-sizing: inherit则表示继承自父元素 box-sizing值的设定

  • 循环添加节点改变dom结构

    不要每进行一次循环创建一个元素就插入到dom,而应该使用createDocumentFrgment()创建一个文档片段,将循环的结果一个一个插入该片段,再将该片段一次插入到dom,减轻浏览器渲染负担

    /* 打印出排序完的城市排名 */
    function render(data) {
      var fragment = document.createDocumentFragment();
      var num = ["一", "二", "三", "四", "五", "六", "七", "八", "九"];
      for (var i = 0; i < soLi.length; i++) {
        var oLi = document.createElement("li");
        oLi.innerHTML = "第" + num[i] + "名:" + data[i][0] + "空气质量:" + "<b>" + data[i][1] + "</b>";
        fragment.appendChild(oLi);
      }
      reUl.appendChild(fragment);
    }
    
  • 模糊匹配

    模糊匹配这里使用了正则表达式,暂时不放总结
    到时再做一篇来总结正则的使用吧

结语

果然基础还是很薄,兴致勃勃地想去玩进阶,还是算了

道に 迷うこと こそ、 道を 知ることだ。
只有迷路了,才会知道路到底在哪里。