CSS入門經典-知識點摘錄

Width屬性的“收縮”和“擴充”適應

所有帶width屬性的元素都有一個預設的auto值，但在使用auto寬度時並不是所有元素都具有相同的效果。例如,<table>元素只是水平擴充以容納其中的資料，這種方法稱為“收縮適應”。另一方面，<div>元素則儘可能水平擴充其寬度，這種方法稱為“擴充適應”。

 

計算選取器的針對性

作為對樣式表優先順序的一個補充，每個樣式表中的選取器也存在優先順序順序。這種優先順序由選取器的針對性決定。比如,id選取器最有針對性，通用選取器最為一般化。在他們之間，選取器的針對性使用以下公式計算：

1、  設一個變數a,若樣式是通過(X)HTML的style屬性應用的，a的值為1，否則為0.

2、  計算選取器中ID屬性的數量，和為變數b的值。

3、  計算選取器中屬性、偽類和類名的數量，三者之和為變數 c的值。

4、  計算選取器中元素名的數量，和為變數d的值。

5、  忽略虛擬元素

.把每個變數中的數字串連在一起得到選取器的針對性。串連是一個編程術語，表示粘合。在這裡，將a、b、c、d串連得到abcd，而不是計算a、b、c、d之和得到另一個變數e。

選取器	選取器類型	針對性
*	通用選取器	0000 (a=0,b=0,c=0,d=0)
li	元素名	0001 (a=0,b=0,c=0,d=1)
ul li	元素名	0002 (a=0,b=0,c=0,d=2)
div h1+p	元素名	0003 (a=0,b=0,c=0,d=3)
input[type=’text’]	元素名+屬性	0011 (a=0,b=0,c=1,d=1)
.someclass	類名	0010 (a=0,b=0,c=1,d=0)
div.someclass	元素名+類名	0011 (a=0,b=0,c=1,d=1)
div.someclass.someother	元素名+類名+類名	0021 (a=0,b=0,c=2,d=1)
#someid	ID名	0100 (a=0,b=1,c=0,d=0)
div#someid	元素名+ID名	0101 (a=0,b=1,c=0,d=1)
style(屬性)	style(屬性)	1000 (a=1,b=0,c=0,d=0)

 

在針對性圖表中包括了前置0來表示串連是如何工作的，但實際上要省去。要決定優先順序的次序，只需要簡單地確定最大的數字。當兩個或多個選取器有相同的優先順序，最後一個將優先適用。Style屬性比所有其他規則都優先。

 

！important規則

隨著CSS中的層疊機制而來的是重寫它的需求。這就是！important規則的來源。！important文法出現在聲明中，在屬性值之後，結束聲明的分號之前。該文法由兩個部分組成：一個驚嘆號作為分隔字元，然後是important
關鍵字。分隔字元標誌著一個組成部分的結束，另一個組成部分的開始。在這裡驚嘆號標誌著聲明的結束。Important關鍵字必須緊跟著出現，然後是結束整個聲明的分號。

如：

P{

         Background:lightblue  !important;

}

該規則優先於style屬性。

 

用margin屬性來水平對齊元素

用atuo關鍵字和margin屬性一起協作可以靠左對齊、置中對齊或者靠右對齊一個元素。

靠左對齊時margin-left設為0,margin-right設為auto，靠右對齊反之，置中對齊則左右都是auto。

但IE(有別於標準)可以使用text-align屬性來對齊元素。這個技術在其他瀏覽器中不起作用。

 

 

寬度和高度的auto值

在預設情況下，width和height屬性的值為auto，所以當不指定寬度和高度時，他們的值都就是auto關鍵字。Auto關鍵字會根據應用的元素類型發生改變。當它應用在<div>元素上時，意味著元素將橫跨所有可用控制項；垂直方向上，會擴充到容納元素內部所有的內容，包括文本、映像或者其他盒子。具有這種行為的元素叫做區塊層級元素有<div>、<p>、<h1>~<h6>、<form>和<ul>元素等。

 

 

浮動盒模型

浮動的元素會被重新置放，以便允許其他的內容在它們周圍浮動，這種行為很獨特。關於這種行為的描述如下：

1、  浮動元素的外邊距不會摺疊，不管它們如何靠近

2、  只有浮動元素後面的元素內容會被該浮動元素所影響。就是說浮動元素後面元素的背景、外邊框、邊框、內邊距和寬度(盒模型和尺寸)都不受影響。

3、  浮動元素總是會被當作區塊層級元素來對待

當一個元素浮動時，它表現得像一個區塊層級元素，但有一個主要區別：它的大小設定變成水平方向和垂直方向都是收縮適應。這意味著在浮動一個<div>元素時，它的尺寸只會擴充到足夠容納裡面的內容。

 

回顧相對定位：

1、  相對定位類似於靜態定位，其元素保持在正財的文檔流中，但這也是僅有的相似之處。

2、  相對定位元素可以用作絕對位置元素的參考點。

3、  相對定位元素可以接受4種位移屬性的組合方式有：top和left、top和right、bottom和left、bottom和right，瀏覽器將忽略除此之外的其他種組合方式。例如，不能對一個相對定位的元素同時使用top和bottom位移屬性。

4、  相對定位的內容可以堆疊和分層放置在Z軸上