CSS入门 0x0 选择器和盒模型

常用选择器

/*类型选择器也称元素选择器或简单选择器*/
p {color:black;}
h1 {font-size:10px;}
/*后代选择器，作用于blockquote下p*/
blockquote p {padding:2px;}
/*ID选择器*/
#main-content h2 {font-size:1.8em;}
/*类选择器*/
.date-post {color:#ccc;}
/*伪类选择器*/
a:link {color:blue;}
a:visited {color:green;}

tr:hover {background-color:red;}
/*通用选择器:所有要素*/
* {
    padding:0;
    margin:0;
}

高级选择器

/*子选择器：只选择元素的直接后代,而后代选择器选择所有*/
#nav>li {
    background:url(folder.png) no-repeat left top;
    padding-left:20px;
}
/*相邻同胞选择器;同一个父元素下的下一个元素 */
h2 + p {
    font-size:1.4em;
    font-weight:bold;
    color:#777;
}
/*属性选择器：根据属性是否存在或其值寻找元素*/*
acronym[title] {
    border-bottom:1px dotted #999;
}
acronym[title]:hover,acronym[title]:focus {
    cursor:help;
}

a[rel="nofollow"] {
    background:url(nofollow.gif) no-repeat right center;
    padding-right:20px;
}

层叠和特殊性

    层叠重要度次序：

• 标有!important的用户样式
• 标有!important的作者样式
• 作者样式
• 用户样式
• 浏览器/用户代理应用的样式

    选择器的特殊性分成四个等级：a,b,c,d

• 如果样式是行内样式，那么a=1
• b等于ID选择器的总数
• c等于类、伪类和属性选择器的数量
• d等于类型选择器和伪类选择器的数量 

 盒模型

    内边距出现在内容区域的周围，如果元素加上背景，那么背景会应用于内容和内边距组成的区域。
    添加边框会在内边距的区域外边加一条线。
    在边框外的是外边距。外边距是透明的。一般使用它控制元素之间的间隔。

外边距叠加

• 当两个或更多垂直外边距相遇时，将形成一个外边距，高度等于两者中较大者。
• 当一个元素包含咋另一个元素中时，他们的顶或底外边距也会发生叠加。
• 外边距甚至可以与本身发生叠加。

   外边距叠加意义在于段落间距一致而不是两倍。只有普通文档流中块框的垂直外边距才会 发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加

相对定位

    元素位置相对于自己的起点变化

绝对定位

   元素相对于临近祖先确定

固定定位

    元素相对于视窗定位