優先順序

權值

標籤權值為1，類權值為10，ID權值最高為100。

p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/

層疊

內聯式 > 嵌入式 > 外部式

重要性

為某些樣式設定具有最高權值，使用!important。

p{color:red!important;}

當網頁製作者不設定css樣式時，瀏覽器會按照自己的一套樣式來顯示網頁。

使用者也可以在瀏覽器中設定自己習慣的樣式，比如有的使用者習慣把字號設定為大一些，使其檢視網頁的文字更加清楚。

這時樣式優先順序為：瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式

但!important優先順序樣式是個例外，權值高於使用者自己設定的樣式。

佈局模型

CSS包含3種基本的佈局模型，用英文概括為：Flow、Layer 和 Float。
在網頁中，元素有三種佈局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）

流動模型

流動模型，流動（Flow）是預設的網頁佈局模式。網頁在預設狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的。

• 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置。
• 在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）

浮動模型

使用float:left;/float:right;使塊狀元素可以並排顯示。

層模型

層佈局模型就像圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層佈局沒能受到熱捧。

層模型有三種形式：

1、絕對定位(position: absolute)

​ 為元素設定層模型中的絕對定位。

​ 將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。

2、相對定位(position: relative)

​ 為元素設定層模型中的相對定位，通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

3、固定定位(position: fixed)

​ fixed：表示固定定位，與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響。

使用規範

1、參照定位的元素必須是相對定位元素的前輩元素。

2、參照定位的元素必須加入position:relative;

3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。

特殊效果

水平居中

使用text-align:center來進行居中設定，但是當被設定元素是塊狀元素時，此設定不起作用。

• 滿足定寬和塊狀兩個條件的元素是可以通過設定“左右margin”值為“auto”來實現居中的

• 不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：

  1. 加入 table 標籤

     利用table標籤的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文字長度決定），因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。

  2. 設定 display: inline 方法：與第一種類似，顯示型別設為 行內元素，進行不定寬元素的屬性設定

  3. 設定 position:relative 和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的

     通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中。

垂直居中

• 父元素高度確定的單行文字

  父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文字中，行與行之間的 基線間的距離 )。

  line-height 與 font-size 的值之差，在 CSS 中成為“行間距”。分為兩半，分別加到一個文字行內容的頂部和底部。

  這種文字行高與塊高一致帶來了一個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。

• 父元素高度確定的多行文字

  方法一：使用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle

  ​ 在父元素設定此樣式時，會對inline-block型別的子元素都有用

  方法二：在 chrome、firefox 及 IE8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell（設定為表格單元顯示），啟用 vertical-align 屬性，但注意 IE6、7 並不支援這個樣式, 相容性比較差。

  ​ 不用新增多餘的無意義的標籤，但相容性不是很好，不相容 IE6、7，而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質。

單位