之前都知道css的link在页面会柱塞页面渲染，但是css还有一种引入方式 @import
<style>
@import url("CSS文件");
</style>
可以用style标签内嵌的方式引入，如果这个css文件有延迟，会阻塞渲染吗？
做一个实验看看 [demo]
现象：1. 页面2秒后显示红色
2. 尽管import的是蓝色在后面,div显示红色
结论：1.import引入的css也会阻塞页面渲染
2.improt的css的权重总是比link引入的低
标签：css
对元素定位细节的重新认识
容器和容器内(position:relative)的定位元素(position:absolute)
我们都认为定位元素left,top相对于容器的左上角，但是左上角这个概念很模糊，因为容器和定位元素他们都有盒子模型。下面做个测试
结论：定位元素到容器的距离是定位元素的外边距(margin的左上角)到容器的内边距的左上角(内边框)的距离。
css渲染阻塞测试
由于m.360zfw.com在google pagespeed的测试中
提示对于js阻塞，网上已经有很多文章，但是css阻塞的描述较少，于是对css阻塞进行深入研究。
写了一个测试demo，代码如下
late-css.php
<?php
header("Content-type: text/css; charset=utf-8");
sleep(intval(@$_GET[time]));
$str = 'div{background:blue}';
echo $str;
?>
late-js.php
<?php
header("Content-type: text/js; charset=utf-8");
sleep(intval(@$_GET[time]));
$str = 'document.write("I'm the lazy note")';
echo $str;
?>
index3.html
<html>
<head>
<style>
div{background:red;width:200px;height:200px;}
</style>
<link rel="stylesheet" href="/lab/late/late-css.php?time=10&blue">
</head>
<body>
<div></div>
</body>
</html>
运行demo呈现的是页面需要等待10秒才能打开，而且直接打开的是蓝色方块。（证明css在页面中存在阻塞,但不确定是在解析DOM时阻塞还是渲染时阻塞）
index4.html
<html>
<head>
<style>
div{background:red;width:200px;height:200px;}
</style>
</head>
<body>
<div></div>
</body>
<link rel="stylesheet" href="/lab/late/late-css.php?time=10&blue">
</html>
运行demo呈现的是页面需要等待10秒才能打开，而且直接打开的是蓝色方块。（证明css在页面中存在的是阻塞渲染）
那么在我们设计页面的时候css，尽量将首屏显示的css直接放在html上面是最合适的，但是实际情况很难做到，比如一些导航的样式，未来在css文件中实现CDN，不得不将css放在外链中。
index.html
<html>
<head>
<style>
div{background:red;width:200px;height:200px;}
</style>
<link rel="stylesheet" href="/lab/late/late-css.php?time=5&blue">
</head>
<body>
<div><script src="/lab/late/late-js.php?time=10"></script></div>
</body>
<style>
div{background:yellow;}
</style>
</html>
运行代码 （证明js，阻塞DOM解析，CSS作用于DOM解析到哪里，就渲染到哪里）
猜猜这是会显示什么？
先白色5秒，再蓝色5秒，再黄色
index2.html
<html>
<head>
<style>
div{background:red;width:200px;height:200px;}
</style>
</head>
<body>
<div><script src="/lab/late/late-js.php?time=10"></script></div>
</body>
<link rel="stylesheet" href="/lab/late/late-css.php?time=5&blue">
<style>
div{background:yellow;}
</style>
</html>
运行代码 （证明css在下载时，不阻塞DOM解析，但是下载时阻塞渲染）
先红色，再黄色
总结：CSS和JS的下载都不会被解析阻塞，CSS下载时会阻塞渲染, 外部样式会阻塞后续脚本执行，直到外部样式加载并解析完毕。
1.没遇到JS阻塞的情况，CSS只会在DOM解析完后渲染。
2.遇到JS阻塞的情况，当DOM一旦遇到JS阻塞时，就会触发CSS渲染
那么现在有一个问题，css写在body前和body后有什么区别，
由上述可见，CSS无论是用STYLE标签还是link外链，
如果没有遇到jS阻塞，放哪里都一样，
如果遇到js阻塞，把CSS写在BODY上面，不会出现二次渲染，把CSS写在BODY下面，JS阻塞时，会出现一次渲染，等阻塞完毕会出现二次渲染（除非外链的CSS下载时间比阻塞时间长）。
页面渲染中的CSS阻塞问题探索
由于m.360zfw.com在google pagespeed的测试中 提示
对于js阻塞，网上已经有很多文章，但是css缺比较少，于是对css阻塞进行深入研究。
写了一个测试demo，代码如下
<html>
<head>
<style>
div{background:red;width:200px;height:200px;}
</style>
<link rel="stylesheet" href="http://www.luoyongjie.cn/sleep.php">
</head>
<body>
<div></div>
</body>
</html>
<?php
header("Content-type: text/css; charset=utf-8");
sleep(10);
$str = 'div{background:yellow}';
echo $str;
?>
运行demo呈现的想象是页面需要等待10秒才能打开，而且直接打开的是黄色方块。（证明css在页面中存在阻塞）
那么在我们设计页面的时候css，尽量将首屏显示的css直接放在html上面是最合适的，但是实际情况很难做到，比如一些导航的样式，未来在css文件中实现CDN，不得不将css放在外链中。
深入研究由inline-block引起的基线问题；
读 http://www.cnblogs.com/qieguo/p/5421252.html 这片文章后，发现普通流布局由很多需要注意的地方，以前遇到垂直对齐问题时，总是用vertical-align测试一下，哪个适合居中就用上了，并没有理解原理是什么。
display : inline-block！
未完待续。。。。
margin在块元素、内联元素中的区别
margin在块元素、内联元素中的区别
HTML（这里说的是html标准，而不是xhtml）里分两种基本元素，即block和inline。顾名思义，block元素就是以”块”表现的元素（block-like elements），inline元素即是以”行”表现的元素（character level elements and text strings）。二者表现的主要差别在于，在页面文档中block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。
block元素（块元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进，一些元素将被废除，而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block，像table这种display:table的元素也是block元素。
inline元素（内联元素）大致有：#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON 继续阅读
chrome 的默认样式
“html,body,div{display:block} head{display:none} body{margin:8px} div:focus,span:focus{outline:auto 5px -webkit-focus-ring-color} a:-webkit-any-link{color:-webkit-link;text-decoration:underline} a:-webkit-any-link:active{color:-webkit-ctivelink}”
CSS系列：CSS中盒子的浮动与定位
1. 盒子的浮动
在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。
CSS中float属性，默认为none。将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。
CSS中float属性，默认为none。将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。
float: left;
可以使用clear来清除浮动：
clear: left | right | both;
2. 盒子的定位 继续阅读
CSS系列：CSS中盒子之间的关系
1. 标准文档流
标准文档流是值在不使用其他的雨排列和定位相关的特殊CSS规则时，各种元素的排列规则。
1.1 块级元素（block level）
块级元素不会排在同一行中，总是以一个块的形式表现出来，并且跟同级的块级元素依次竖直排列，左右撑满。
1.2 行内元素（inline） 继续阅读