一个元素的占用面积大小以及布局定位通常受到包含块（Containing Block）的影响，比如 top 和 left 取百分比时相对的长度是什么长度，width 和 height 取百分比时相对的长度是什么长度？
包含块一般情况下是当前元素的最近的祖先块元素1的内容区域，但具体还需要分情况来确定。
浏览器渲染文档时，对于每一个元素，都会有一个布局盒子，该盒子又被划分为四个区域。
box-sizing 设为 border-box，会影响 width 和 height 的计算，但不影响布局区域的划分。
border，无处不在，针对三角形作个备忘。
1. 在设置了 border-style 和正的 border-width 但没设置 border-color 的情况下，border 的颜色是跟随字体颜色来的。
2. background 的覆盖范围是包括 border 的，所以在 border 的颜色是透明时，将显示 background。
紧跟着的图片的页面来源是 JS Bin 上的一个 demo。
border 是包成一个矩形的，如下图左上。但单个 border 是如何的呢，可以看下图右上，可以看到对于交接处是采用对分的形式的。由于 background 的作用范围，所以左下图把右 border 设为透明后，显示出黑色的背景来。右下，在把 background 也设为透明后，border 处显示出更下方的内容了。
CSS Regions 的提案很早就有了，前端观察 也在 2011 年的时候就译了 CSS3 Region：基于HTML和CSS3的富页面布局 一文，但我首次听说还是苹果的 WWDC 2013 大会。
CSS Regions 目前依然是草案，变化可能还会很大。从目前的状态来看，和前端观察 2011 年那篇译文的写法已经有了很大的变化了。
CSS Regions 的主要目的是把一段文档进行更加丰富的排版，如分块、分栏和中有间隔等。
常规的分块展示内容看不出为何需要新工具。但如果需要对一段内容进行如下图那样的布局的话，问题就来了。需要计算每块能容乃的字数有多少，然后截字输出到对应模块。但还是存在着问题，对于现在的响应式布局又该如何动态调整？遇到图片呢？
Chrome 限制了最小字体是 12px，虽然一般情况下，比这还小的字体将会无法清晰查看，但非得设时，可以使用以下代码来解除限制。
html{-webkit-text-size-adjust:none;}
P.S. airyland 提醒：不建议用这个属性来支持小字体，这样会使页面缩放时其他元素缩放了，而字体还是一样大小。
P.S. 非要用的时候，把选择符精确定位至小于 12px 的元素上，不用 html，减少影响范围。
2013/06/26
Chrome 里可以设置字体大小的下限，默认是 12，最小可以去到 6，最大可以去到 24，但问题是，不可能要求浏览者修改浏览器的设置。所以最好的方法还是：尽可能不要设计小于 12 的字，如果有，那应是不可变的（这样可用图片）。
Chrome 27 后取消了上面的技巧，所以非得要做的话可以用 -webkit-transform{scale(0.85) translate(-1px, 1px)} 这样的方式。scale 来做缩放，缩放产生了位移，再加上 translate 来平移调整。
使用 innerHTML 设置内容时，如果内含 style 样式，在 IE7 及以下可能会发现样式没生效。
解决方法：把 <style> 样式放到待设置的 html 内容的最后。
所使用的代码片段是：
var str1 = '<style>#con{color:red;}</style><p>红字</p>',
str2 = '<p>二：<style>#con{color:green;}</style>绿字</p>',
str3 = '<p>蓝字</p><style>#con{color:blue;}</style>';
对于下面这段代码，当 focus 表单（如输入框）时，提交按钮在 IE 6/7 中将会出现一个黑色边框。
<style>
input{border:1px solid red;}
</style>
<form>
<input type="text" value="" />
<input type="submit" value="submit" />
</form>
如果需要对按钮做美化，保持各浏览器一致（比如设定背景和border等），那么需要处理这个问题。
解决方法是：把 submit 按钮的 border 设为 none，然后如果需要 border，那么采用在其外面包一层元素的方法来实现。
text-overflow:ellipsis 配合 overflow:hidden 可以用来实现字符串截断显示为更多的效果，而不用精确截字输出。
text-overflow 的基本单值用法就连 IE6 都支持，所以是可以放心使用的。
默认值是 clip，即简单地分割，可能会导致字符显示一半； 而 ellipsis 可以截字然后补上 …，效果更好。
<style type="text/css" media="screen">
#inner{border:1px solid #ccc;}
#inner p{width:200px; white-space:nowrap; overflow:hidden;}
#inner p.t1{text-overflow:clip;}
#inner p.t2{text-overflow:ellipsis;}
</style>
<div id="inner">
<p class="t1">text-overflow:clip more text here</p>
<p class="t2">text-overflow:ellipsis more text here</p>
<p class="t1">text-overflow:clip 中文测试跟多更多</p>
<p class="t2">text-overflow:ellipsis 中文测试更多更多</p>
</div>
结果如下：
text-overflow:clip more text here
text-overflow:ellipsis more text here
text-overflow:clip 中文测试跟多更多
text-overflow:ellipsis 中文测试更多更多
IE6 有个多个 class 样式的 bug，具体表现为：当为一个元素连用 2 个及以上的 class 来匹配样式时（如：p.a.b），ie6 会识别为样式规则中最后一个 class 的定义（即：p.b）。
这样一来，不但多 class 的样式不正确，还可能会覆盖掉原对应 class 的样式（如 .b 的样式）。
下面截图最后一行有误，class 应为 “a c”
上面截图最后一行有误，class 应为 “a c”