1.box-sizing: content-box; // width = content + padding + border
2.box-sizing: border-box;  // width = 定义时的宽度(包含padding + border)

绝对定位： position: absolute; // 使元素脱离文档流，绝对定位的参照物是最近的已经定位的的元素
相对定位： position: relative; 

.parent:after {
        display: block;
        clear: both;
        content: ‘‘;
        visibilty: hidden;
        height: 0;
    }
    .parent {
        zoom: 1; //兼容IE5一下的版本
    }

   .class {
        position: absolute;
        htight: 200px;
        width: 100px;
        left: 50%;
        top: 50%;
        margin: -100px 0 0 -50px;
   }

    .class {
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .class {
       position: absolute;
       height: 200px;
       width: 100px;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

    display: inline -->  宽度和高度由元素的内容决定，与其他元素共占一行，
        例如<span> <i> <a> ,可以使用padding上下左右都有效，margin只有left、right有效
    
    display: block  -->  默认宽度由父容器决定，高度由内容决定，独占一行且可以设置宽高， 
        例如 <div> <p> <ul>，padding、margin无论上校左右都有效
    
    display: inline-block --> 可以是两个块级元素在同一行水平排列，padding、margin都有效，
        inline-block存在间隙问题，解决方案：父元素设置font-szie: 0px;
    
    void(空元素) <br> <link> <meta>

1. visibility: hidden; 文档流中的位置依然存在，只是被隐藏掉
2. display: none;      文档流中的位置不存在
3. opacity: 0;         使元素的透明度变为透明，文档流中的位置依然存在
4. position: absolute; margin-top: -9999px; margin-left: -9999px;      
    使用绝对定位使元素被推离出可视区，达到隐藏元素的目的

1. link使html的标签元素，而@import是css提供的
2. 在页面加载时，link是同时加载的，而@import引用的css是当页面加载完成以后，才会加载
3. 兼容问题：link无兼容问题，而@import不兼容IE5一下的版本

1. 共同点：（1）都会把元素设置为display：inline-block
            (2) 让元素脱离文档流，不占据空间
            (3) 默认会覆盖非定位元素上
2. 不同点： (1) absolute的“根元素”是可以设置的，是离他最近的已定位的元素；而fixed的“根元素”不可设置，
    永远都是浏览器窗口，当浏览器滚动的时候，使用了fixed布局的不会随着浏览器滚动而改变位置

1. 圆角：border-radius  阴影：box-shadow
2. 文字特效：text-shadow, 线性渐变：gradient 旋转：transform
3. 旋转：transform: rotate(90deg)  scale(0.85, 0.90)  translate(0px,-30px)  skew(-9deg,0deg); 
    // 旋转； 缩放； 偏移； 倾斜
4. 多背景：rgba
5. 在CSS3中唯一引入的伪类是 ::selection.
6. 媒体查询，多栏布局
7. border-image 

1. XHTML元素必须被正确的嵌套
2. XHTML元素必须被关闭
3. 标签名必须用小写字母
4. XHTML必须含有根元素

overflow: hidden;
text-overflow: elipsis;
display: -webkit-box;
-webkir-line-camp: 3;
-webkit-box-orient: vertical;

<div class="text"></div>
.text {
    content: ‘‘;
    border-width: 10px 0 10px 20px;
    broder-style: solid;
    border-color: transpaent transpaent transpaent #f5f5f5;
}

add.call(o,5,7);    //1+3+5+7=16
//call 传参的时候是扁平的把每个参数传进去
add.apply(o,[10,20]);   //1+3+10+20=34
//apply 传参的时候是把参数作为一个数组传进去

<input id="input" />

//    const data = {}
//    const input = document.getElementById(‘input‘)
//    Object.defineProperty(data, ‘text‘, {
//      set(value) {
//        input.value = value
//        this.value = value
//      }
//    })
//    input.onchange = function(e) {
//      data.text = e.target.value
//    }  　

let temp = {}
data = data.reduce((prev, curv) => {
    if(temp[curv.name]) {
        
    } else {
        temp[curv.name] = true
        prev.push(curv)
    }
    return prev
})

var url = ‘https://juejin.im/search?query=%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%
        98&type=all‘;
function splitUrl () {
    let url1 = url.split(‘?‘)[1] //获取url中问号后面的数据
    let url2 = url1.spliy(‘&‘) // 以&来分割数组
    let url3 = []
    url2.forEach(item => {
        url3.push(item.split(‘=‘)[1])
    })
    return url3
}

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
*/
function debounce(func, wait, immediate) {
    let timeout;
    return function () {
        let context = this
        let args = arguments
        if (immediate) {
            var callNow = !timeout
            timeout = setTimeout(() => {
                timeout = null
            }, wait)
            if (callNow) {
                func.apply(context, wait)
            }
        } else {
            timeout = setTimeout(() => {
                func.apply(context. args)
            }, wait)
        }
    }
}

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
*/
function throttle(func, wait) {
    let timeout;
    return function () {
        let context = this
        let args = arguments
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null
                func.apply(context, args)
            }, wait)
        }
    }
}

1. 创建新节点
  (1) createDocumentFragment() //创建一个DOM片段
  (2) createElement() // 创建一个具体的元素
  (3) createTextNode() // 创建一个文本节点

2. 添加、移除、替换、插入
  (1) appendChild() // 创建一个节点
  (2) removeChild() // 移除一个节点
  (3) replaceChild() // 替换一个节点
  (4) insertBefore() // 在已有的节点前增加一个节点

3. 查找
  (1) document.getElementsByTagName() // 通过标签名称查找
  (2) document.getElementsByName() // 通过元素的name属性的值
  (3) document.getElementById() // 通过元素Id,唯一性

(1)localStorage // 本地存储 (2)sessionStorage // 会话存储
共同点：
    (1) localStorage和sessionStorage的存储数据大小一般都是：5MB
    (2) localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信
不同点：
    (1) localStorage不会随着浏览器关闭而消失，而sessionStorage会随着浏览器关闭而消失
复制代码