CSS中的绝对定位与相对定位
层级关系为：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图：
为改变参照物（橘色框）后的效果
层级关系为：
<div ——————————— position:relative;最近的祖先定位元素，参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图：
参照物为最顶级的元素情况。
层级关系为：
<body ----------------参照物
<div ———————————没有设置为定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图：
仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图：
IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果图：
时隔这么多时间，发现自己还是特别喜欢前端，虽然一直不想承认这一点！又学习了下css方面的东西，总结了几点，看下吧！
div[title="1"] div中title等于1的div[title~="1"] div中title包含1的，必须用空格分开的
div[title^="1"] div中首字符串为1的
div[title$="1"] div中尾字符串为1的
div.classA 选择类名为classA的div
a#nav:link ID为nav的a标签连接
a#nav:visited ID为nav的a标签访问后的样式
input:focus { } 当input获得焦点时样式
p:first-child 某元素的第一个p元素
p:first-letter p元素的第一个字母
p:first-line p元素的第一行
h2:before { content: "}}"; color:gray;} 为每个h2前面加上"}}"符号
h2:after { content: "{{"; color:gray; }为每个h2后面加上"{{"符号
html>body table tr[id="totals"] td ul>li { color: maroon; } html的第一个body元素下的所有table的id为totals的tr的所有td元素下的所有ul的第一个li元素
p.dark { color:#333 !importent; background:white;} 这里表示类为dark的元素的color元素是很重要的，不能被其他声明覆盖