css中的包含块对于元素的定位尤其重要。在css中，每一个元素都会生成一个框(或者叫盒子),这些框或者盒子为他们的子元素创建了一个包含块。但是，并不是一个元素的包含块一定是他的父元素。那么，怎样确定包含块以及包含块的区域，请参看《KB008：包含块(Contain block)》。
本文链接
note：本文主要参考了Stoyan Stefanov的文章《When is a stylesheet really loaded?》
在之前的文章《CSS文件动态加载》中，我们提到了在动态加载CSS文件的时候，如何检测加载是否完成。注意，这里的加载完成包含了两种情况：
1）加载成功 2）加载失败
也就是说，这里并没有将成功与失败的情况区分开来。看到这里你可能疑惑了，就动态加载个CSS文件，洋洋洒洒写了一两百行代码，连是否加载成功/失败都没能区分开来，这似乎有些不可理解。
美好的假象——如何判断CSS加载完成
这里先不抛出结论，而是先思考一个问题：如何动态加载CSS文件？
很简单，就下面几行代码：
node.rel = 'stylesheet';
node.href = 'style.css';
document.getElementsByTagName('head')[0].appendChild(node);
很好，那么接下来的问题是：怎么判断CSS文件是否加载完成？
那还不简单，几行代码就搞定的事情，前端的老朋友onload、onerror闪亮登场：
node.rel = 'stylesheet';
node.type = 'text/css';
node.href = 'style.css';
node.onload = function(){
alert('加载成功啦！');
};
node.onerror = function(){
alert('加载失败啦！');
};
document.getElementsByTagName('head')[0].appendChild(node);
嗯，这么写是没错。。。从理论上。。。看下HTML 5里关于资源加载完成的描述，概括起来就是：
Once the attempts to obtain the resource and its critical subresources are complete, the user agent must, if the loads were successful, queue a task to fire a simple event named load at the link element, or, if the resource or one of its critical subresources failed to completely load for any reason (e.g. DNS error, HTTP 404 response, a connection being prematurely closed, unsupported Content-Type), queue a task to fire a simple event named error at the linkelement. Non-network errors in processing the resource or its subresources (e.g. CSS parse errors, PNG decoding errors) are not failures for the purposes of this paragraph.
看上去很美好的样子。我们知道，这个世界从来都不完美，至少对于前端来说，这个世界跟完美这个词没半毛钱关系。JS中一直为人诟病的语法，浏览器糟糕的兼容性问题神马的。将上面那段代码放到IE（版本9及以下，10没有测过）里面，将文件链接指向一个不存在的文件，比如在fiddler里将返回替换成404：
node.href = 'none_exist_file.css'; //其他属性设置省略
node.onload = function(){
alert('加载成功啦！');
};
node.onerror = function(){
alert('加载失败啦！');
};
document.getElementsByTagName('head')[0].appendChild(node);
于是你看到一句华丽丽的提示：
“加载成功啦！”
看到这里是不是对这个世界产生了深深的怀疑——我承认我当时把微软开发IE浏览器的兄弟们全家都问候了一下。
好吧，这篇文章并不是关于IE的吐槽文，在CSS文件加载状态的检测这个问题上，IE的表现虽不完美，但相比之下还不算特别糟糕。
慢着！意思是——还有更糟糕的？是的，比如早期版本的firefox，连onload都不支持。
如何判断CSS文件加载完成——五种方案
抛开一切的埋怨与不满，按照过往的经验，如何判断一个文件是否加载完成？一般有以下几种方式：
示例代码如下：
link.onload = function(){
alert('CSS onload！');
}
link.addEventListener('load', function(){
alert('addEventListener loaded !');
}, false);
link.onreadystatechange = function(){
var readyState = this.readyState;
if(readyState=='complete' || readyState=='loaded'){
alert('readystatechange loaded !');
}
};
var curCSSNum = document.styleSheets.length;
var timer = setInterval(function(){
if(document.styleSheets.length>curCSSNum){
//注意：当你一次性加载很多文件的时候，需要判断究竟是哪个文件加载完成了
alert('document.styleSheets loaded !');
clearInterval(timer);
}
}, 50);
div.className = 'pre_defined_class'; //加载的CSS文件里才有的样式
var timer = setTimeout(function
http://www.v2ex.com/?r=atupal
V2EX Workspace 是一个为小团队创造的，管理想法和项目的最好的工具，这个工具能够在一个想法从构思，到验证，到实现，再到运营的整个生命周期中帮到团队。从而让和项目有关的信息不再散落在各处，而是在一个地方就可以一目了然。
任何的巨型项目或是大团队，实际上也都是由小团队构成的。根据我们自己在以往进行的创意工作中所获得的经验，我们实际上在工作中几乎不会和超过 10 个以上的人在一周的时间周期内进行频繁互动。通常，一个高效的小团队是由 4 - 5 位彼此之间具有高度默契的成员构成的，而高度默契来自于已经进行过的大量互动中所产生的互相了解。而这就是我们的目标用户，及我们认为的，小团队。 V2EX Workspace 于 2011 年 10 月 10 日上线开始 beta 测试。