html5及CSS的學習4

四、樣式優先順序

4.3 改變優先順序

3.3 定位

定位(position)允許您從正常的文件流布局中取出元素，並使它們具有不同的行為，例如放在另乙個元素的上面，或者始終保持在瀏覽器視窗內的同一位置。

有許多不同型別的定位，您可以對html元素生效。

3.3.1 靜態定位

靜態定位是每個元素獲取的預設值——它只是意味著「將元素放入它在文件布局流中的正常位置 ——這沒有什麼特別的。

如果所有的父元素都沒有顯式地定義position屬性，那麼所有的父元素預設情況下position屬性都是static。

3.3.2 相對定位

相對定位與靜態定位非常相似，佔據在正常的文件流中，除了你仍然可以修改它的最終位置，包括讓它與頁面上的其他元素重疊。

給元素加上position:relative; 並不會改變元素的位置，需要使用top，bottom，left和right屬性。

相對定位生成相對定位的元素，相對於其正常位置進行定位

3.3.3 絕對定位

position:absolute; 生成絕對定位的元素，相對於static定位以外的第乙個父元素進行定位。絕對定位的元素不再存在於正常文件布局流中。

3.3.4 固定定位

fixed 固定定位，這與絕對定位的工作方式完全相同，只有乙個主要區別：絕對定位固定元素是相對於元素或其最近的定位祖先，而固定定位固定元素則是相對於瀏覽器視口本身。

3.3.5 z-index

當我們使用定位後，元素有可能會出現重疊現象。什麼決定哪些元素出現在其他元素的頂部？當我們在定位上下文中只有乙個定位的元素，它出現在頂部，因為定位的元素勝過未定位的元素。如果是多個定位元素，在後面的定位元素將出現在先定位與元素的頂部。

當然，我們可以使用z-index屬性。「z-index」是對z軸的參考。

網頁也有乙個z軸：一條從螢幕表面到你的臉（或者在螢幕前面你喜歡的任何其他東西）的虛線。z- index值影響定位元素位於該軸上的位置；正值將它們移動到堆疊上方，負值將它們向下移動到堆疊中。預設情況下，定位的元素都具有z-index為auto，實際上為0。

3.3.6 position: sticky

還有乙個可用的位置值稱為 position: sticky，比起其他位置值要新一些。它基本上是相對位置和固定位置的混合體，它允許被定位的元素表現得像相對定位一樣，直到它滾動到某個閾值點（例如，從視口頂部起10畫素）為止，此後它就變得固定了。

4.1 樣式衝突

同乙個元素有多個相同css屬性來適配，這個時候就會發生樣式衝突。

type
="text/css"
>
#mydiv
div.mydiv
style
>
class
="mydiv"
id="mydiv"
>
div>

id 選擇器、元素選擇器、class選擇器中都對 div 元素的background-color(背景顏色)屬性做了定義。這個時候就發生了樣式衝突。

當發生樣式衝突時，誰的優先順序高，元素就適應哪個。如上所示，id選擇器的優先順序高於元素選擇器和class 選擇器，所以 div 的background-color屬性值是green。

4.2 優先順序

4.2.1 四種樣式用法的優先順序

內聯樣式 (在元素style屬性（attr）中定義的樣式)

內部樣式 (在標籤中定義的樣式)

外部樣式(包含@import)

內聯樣式 > 內部樣式 > 外部樣式 > 瀏覽器預設樣式

4.2.2 不同選擇器之間的優先順序

選擇器之間的優先順序，取決於選擇器的精度。

優先順序:

id 選擇器

class 選擇器

元素選擇器

4.2.3 重複定義樣式時

在不同地方重複定義樣式時，如：

rel=
"stylesheet"
type
="text/css"
href
="a.css"
>
// blue 
rel=
"stylesheet"
type
="text/css"
href
="b.css"
>
// red

在a.css和b.css中使用相同的選擇器都定義了對於某個元素的樣式屬性時，那麼誰在後邊元素適配誰。

4.3 改變優先順序

如果想要改變樣式的優先順序，可以在css屬性值後邊加上!important來將優先順序提高。

type
="text/css"
>
div.mydiv
style
>
class
="mydiv"
>
div>

class選擇器優先順序高於元素選擇器，但是在元素選擇器中，background-color的值中有!important關鍵字將優先順序提高了，所以最後div的背景顏色是藍色的。

總結：樣式的優先順序：就近原則，哪個樣式離標籤最近，標籤就適應它的樣式

選擇器的優先順序：在設定相同屬性時：id選擇器》class選擇器》標籤選擇器

提公升樣式的優先順序: 用**!important**提公升優先順序

4.3.1選擇器比較

選擇器相同

不同id ----class

1.都是元素的屬性值 2.都區分大小寫

id作用在乙個元素上，class可以作用在多個元素上

class ----- 元素（標籤）

都可以作用多個元素

1. class區分大小寫，元素不區分大小寫 2. class可自定義，元素是html元素 3. class可適配多個不同元素，元素只能適配同一元素

後代 ----子元素

1. 都可適配多個元素 2.都可以使用元素作為選擇器的一部分

子元素只能適配直接子元素，後代可以適配所有被包裹的元素

html5及CSS的學習4

學習HTML5和CSS（三）

HTML5的學習（二）HTML5標籤

HTML5學習之 HTML 5 拖放

html5及CSS的學習4

學習HTML5和CSS（三）

HTML5的學習（二）HTML5標籤

HTML5學習之 HTML 5 拖放

相關推薦