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