如何实现里两栏布局

利用float+margin实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style type="text/css">
    #left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    margin-left: 100px; /*大于等于#left的宽度*/
}

</style>
<body>
    <div id='left'>左列定宽</div>
    <div id='right'>右列自适应</div>
</body>
</html>

使用float+overflow实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style type="text/css">
#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    overflow: hidden; /*触发bfc达到自适应*/
}

</style>
<body>
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</body>
</html>

优缺点：

优点：代码简单，容易理解，无需关注定宽的宽度，利用bfc达到自适应效果
缺点：浮动脱离文档流，需要手动清除浮动，否则会产生高度塌陷；不支持ie6

使用table实现


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style type="text/css">
#parent{
    width: 100%;
    display: table;
    height: 500px;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    background-color: #0f0;
}
#left,#right{
    display: table-cell;  /*利用单元格自动分配宽度*/
}

</style>
<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>
</html>

优缺点：

优点：代码简单，容易理解，无需关注定宽的宽度，利用单元格自动分配达到自适应效果
缺点：margin失效；设置间隔比较麻烦；不支持ie8-

使用绝对定位实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style type="text/css">
#parent{
    position: relative;  /*子绝父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f00;
    width: 100px;
    height: 500px;
}
#right {
    position: absolute;
    top: 0;
    left: 100px;  /*值大于等于#left的宽度*/
    right: 0;
    background-color: #0f0;
    height: 500px;
}

</style>
<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>
</html>

使用flex实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style type="text/css">
#parent{
    width: 100%;
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    flex: 1; /*均分了父元素剩余空间*/
    background-color: #0f0;
}


</style>
<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>
</html>

实现斐波那契数列

递归法

这是最容易实现的方法，写起来简单，但是效率并不是很高。

 var count;
    var count=0;
    var fib=function(n){
        count++;
        if(n==1||n==2){
            return 1;
        }
        else{
            return fib(n-2)+fib(n-1);
        }
    }

闭包递推法

虽然这里也是使用了递归，但是闭包大大减少了递归的次数，因为它是最先递归到fiba(3)，就可以将fiba(3)存储到数组中，这样就可以根据数组中arr[3]+arr[2]，得到fiba(4)的值，并存储在数组中，如此往复，便会得到最终结果。可以说，这是典型的用空间换时间的例子。

    var count2=0;
    var fiba = (function(){
        var arr = [0,1,1];   //第0位只是占位，从第一位开始算起
        return function(n){
            count2++;   
            var res=arr[n]; /*因为内部引用了arr，并返回，导致arr一直在内存中*/
            if(res){
                return res;
            }else{
                arr[n]=fiba(n-1)+fiba(n-2);
                return arr[n];
            }   
        }
    })();