CSS基礎

1.樣式表的層疊與選擇器的特殊性。

在樣式表中，同一元素可能有兩個或者更多的規則。CSS通過一個成為“層疊”的過程處理這種沖突。層疊采用如下重要度次序：

標有!important的用戶樣式。
標有!important的作者樣式
作者樣式
用戶樣式
瀏覽器/用戶代理應用的樣式

然后根據選擇器的特殊性決定規則的次序：具有更特殊的選擇器的規則優于具有一般選擇器的規則。如果兩個規則的特殊性相同，那么后定義的規則優先。

選擇器的特殊性分為四個等級：a b c d

如果樣式是行內樣式，那么a=1
b等于ID選擇器的總數
c等于類，偽類和屬性選擇器的數量
d等于類型選擇器和偽元素選擇器的數量

特殊性示例：

選擇器特殊性以10為基數的特殊性

style="" 1,0,0,0 1000

#wrapper #content{} 0,2,0,0 200
#content .dateposted{} 0,1,1,0 110

                           div#content{} 0,1,0,1 101
                           #content{} 0,1,0,0 100
                           p.comment .dateposted 0,0,2,1 21
                           p.comment 0,0,1,1 11
                           div p{} 0,0,0,2 2
p{} 0,0,0,1 1

代碼示例：

CSS文件：

#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; 
}

html文件：

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

結果：

chrome中：

Test

Hello!

IE中：

Test

Hello!

在chrome中，若將css中前2個樣式調換位置，即

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

#content #subcontent1 h2{
      color:red; 
}

則結果為：

Test

Hello!

而對特殊選擇器“*”和“+”測試，IE和Chrome的表現又不同。此不贅述。

那當樣式表中同一元素既有!important聲明又有選擇器的特殊性時，誰的優先級高呢？ !important一旦使用，它就覆蓋了其他規則，而不需要管選擇器的特殊性。

2.盒子模型。

在CSS中，width和height指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，只會增大元素框的總尺寸。當外邊據為負值時，可應用于多種技術中，如“投影”、“三欄布局”等。

關于外邊距的合并：

HTML文件

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

css文件：

#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”后：

若添加“border:1px”后：

chrome效果:

IE效果：

所以大多我們可以通過添加一點內邊距或與元素背景顏色相同的小邊框來修復外邊距的疊加。

注：只有普通文檔流中塊框的垂直外邊距才會發生外邊距疊加。行內框、浮動框和絕對定位框之間的外邊距不會疊加。

3.浮動與清除。

float:將元素從常規文檔流中移出，直至該元素碰到其他元素的邊框為止。如果浮動元素后面還有文檔流的文本，那么文本將會圍繞著浮動元素存在。

clear:對元素進行清理實際上是為前面的浮動元素留出了垂直空間。具體表現為將該元素的margin-top重設（CSS1、CSS2）或者是增大清楚空間而margin-top不變（CSS2.1）。

浮動的特點：如果沒有足夠的水平空間，浮動元素將下移動，如果浮動元素高度不同，那么當它們向下移動時可能會被其他浮動元素“卡住”：

如圖：

關于浮動與清除的一些方法：

HTML文件：

CSS文件：

#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">：

（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; 
}