1.样式表的层叠与选择器的特殊性。

    在样式表中，同一元素可能有两个或者更多的规则。CSS通过一个成为“层叠”的过程处理这种冲突。层叠采用如下重要度次序：

1.     标有!important的用户样式。
2.     标有!important的作者样式
3.     作者样式
4.     用户样式
5.     浏览器/用户代理应用的样式

#content #subcontent1 h2{      
    color:red; 
}  

#content #subcontent1>h2{      
    color:green; 
} 
 
body #content div[id="subcontent1"] h2{
      color:orange; 
}  

#subcontent1 div.subcontent2 h2{
      color:yellow; 
}   

subcontent1 div.subcontent2 h2.first{
     color:blue; 
}

<div id="content">
 	<div id="subcontent1">
 		<h2>Test</h2>
 		<div class="subcontent2">
 		<h2>Hello!</h2>
 		</div>
 	</div>
 </div>	

#content #subcontent1>h2{
      color:green; 
}

#content #subcontent1 h2{
      color:red; 
}

Test

    <div id="content1">
 	<div id="content2"></div>
         <div id="content3"></div>
     </div>	

#content1{
 	height:100px; 	width:100px; 	margin:20px; 	background:red; 
} 

#content2{
 	margin:20px; 	height:20px; 	width:20px; 	background:green; 
} 

#content3{
 	margin:20px; 	height:20px; 	width:20px; 	background:blue; 
} 

每个content都添加“padding:1px”后：

3.浮动与清除。

float:将元素从常规文档流中移出，直至该元素碰到其他元素的边框为止。如果浮动元素后面还有文档流的文本，那么文本将会围绕着浮动元素存在。

clear:对元素进行清理实际上是为前面的浮动元素留出了垂直空间。具体表现为将该元素的margin-top重设（CSS1、CSS2）或者是增大清楚空间而margin-top不变（CSS2.1）。

浮动的特点：如果没有足够的水平空间，浮动元素将下移动，如果浮动元素高度不同，那么当它们向下移动时可能会被其他浮动元素“卡住”：

如图：

关于浮动与清除的一些方法：

HTML文件：

#content1{
     margin:20px;     height:60px;     width:60px;     float:left;     background:red; 
}  

#content2{
     margin:20px;     width:50px;     height:50px;     float:left;     background:green; 
}  

#maincontent{
     border:1px gray solid;     width:200px; 
} 

如何让maincontent包围住content1和content2呢？

有如下一些方法：

（a）让maincontent浮动——float:left;

（b）添加空白块

html中添加<br id="clear">：

        <div id="content2"></div>
        <br style="clear:both"/>

（c）maincontent中添加overflow:hidden。（值为hidden或者auto的overflow属性会自动清理包含的任何浮动元素。）

（d）after伪元素的应用：

CSS中添加如下样式：

#maincontent:after{
       content: ".";       display: block;       height: 0;       clear: both;       visibility: hidden;  
}  

.clear{
     zoom:1;            /*IE triggers hasLayout，高版本IE不需要了*/ 
} 

其他方法略去，推荐c、d的方法。

4.关于布局：

布局可分为固定宽度、流式、弹性布局。各布局主要是单位的不同。一般使用px和em、%作为单位。

ps：弹性布局中，最好以%指定内部宽度（被包含框），而以em指定容器宽度（包含框），这样修改布局时，不需要所有宽度都修改。

两栏布局很简单，在此不赘述。

如下：

HTML文件：

<div class="content">
     <div class="secondary">Secondary</div>
     <div class="primary">Primary</div>
</div>    

CSS文件：

.content .primary{
     width:450px;     height:200px;     border:1px solid red;     float:right;     
        margin:30px 10px;     display:inline;     text-align:center; 
}  

.content .secondary{
     width:100px;     height:200px;     border:1px solid green;     float:left;     
        margin:30px 10px;     display:inline;     text-align:center; 
}  

.content{
     width:600px;     height:300px;     border:1px dashed gray;     float:left; 
}

三栏布局：在primary中将之分为2部分。如下：

三栏布局还可以用负外边距解决最右边框（即pri_secondary框）的问题。此不赘述。

5.其他想说的几点：

a.更多的应用html5和css3。

b.圆角框（1.几张图像的覆盖 2.border-radius 3.border-image）、投影（1.负外边距 2.相对定位--left:-5px;等 3.box-shadow）、不透明度（rgba）及美化连接（突出显示不同的连接类型）。

参考书籍：CSS Mastery