提升 | 自问自答

写法：

    



    @import url(style.css);

@charset "utf-8";
@import url(style.css);
*{ margin:0; padding:0;}
.notice-link a{ color:#999;}

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；

            @import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；

            @import需要页面网页完全载入以后加载。

            //    所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)

区别3：link是XHTML标签，无兼容问题；

            @import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：link支持使用Javascript控制DOM去改变样式；

            @import不支持。

两边固定宽度，中间自适应的三栏布局，并且中间栏优先渲染。

    
    



	
    header	
    	  
        圣杯middle	  
        圣杯left	  
        圣杯right	
    	
    footer


.sbbox #hd{ height:50px; background: #000; text-align: center;}
.sbbox #bd{ padding:0 200px 0 180px; height:100px;}

.sbbox #middle{ float:left; width:100%; height:100px; background:#df0;}

.sbbox #left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0f2; position:relative; left:-180px;}
 
.sbbox #right{ float:left; width:200px; height:100px; margin-left:-200px; background:#0f2; position:relative; right:-200px;} 

.sbbox #footer{ height:50px; background: #000; text-align: center;}



	
    header 	
    		
        双飞翼middle	
    	
    双飞翼left	
    双飞翼right	
    footer


.sfybox #hd{ height:50px; background: #666; text-align: center;}
.sfybox #middle{ float:left; width:100%; height:100px; background:blue;}
.sfybox #left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0c9;}
.sfybox #right{ float:left; width:200px; height:100px; margin-left:-200px; background:#0c9;}
 
.sfybox #inside{ margin:0 200px 0 180px; height:100px;}
.sfybox #footer{ clear:both; height:50px; background: #666; text-align: center; }



	
    flex/left	
    flex/middle	
    flex/right


.flexbox{display: flex;}
.flexbox #middle{flex: 1; background: #0cc;}
.flexbox #left{padding: 0 0 100px; background: #dc2;}
.flexbox #right{padding: 100px 0 0; background: #f0c;}

Math.random()  这个函数可以生成 [0,1) 的一个随机数。

floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。

includes() 方法用来判断一个数组是否包含一个指定的值

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

function buildArray(arr, length, min, max) {		  	
    var num = Math.floor(Math.random() * (max - min)) + min;		
    if (!arr.includes(num)) { arr.push(num); }		
    return arr.length === length ? arr : buildArray(arr, length, min, max);	
}	
var result = buildArray([], 5, 5, 32);	
console.table(result);