be careful

1 使用jq的appendTo添加元素时

$("<span>").appendTo( $(".box") );

经过测试

$("<span>").text("what whay ").appendTo(".ss");
$("<b>").text("what whay ").appendTo( $(".ss") );         
$("<div></div>").text("what whay ").appendTo( $(".ss") );                     
$("<div></div>").text("what whay ").appendTo(".ss");   

以上四种方式都可以成功添加到页面中去。

2 有时候first-child 与last-child不起作用

<div class="dm">
<span>第一行</span>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
<span>最后一行</span>
</div>

css

<style> .dm p:first-child { background:#09C;color:#fff} .dm p:last-child { background:#09C;color:#fff} </style>

但是这样你会发现并不会得到想象的结果。
当你改变Html为

<div class="dm">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
<p>最后一行</p>
</div>

的时候，就可以了。
原因是last-child 和first-child的作用原理。这个p:first-child { background:#09C;color:#fff} 要被执行，必须满足两个条件，第一，目标元素是一个P 。第二，目标元素时父级元素的第一个子元素。
只有同时满足这两个条件的,才可以被渲染出来。
详细的解释请参考文章
http://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82/

3 关于定位属性 position
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是
window视窗本身。在文档滚动时该元素不会在浏览器视图中发生位置的移动

在css的定位机制有三种，分别是1：文档流，2：浮动（float），3定位（position）
其中文档流的意义就是按照HTML里面的写法就是从上到下，从左到右的排版布局;