7.31.2019

1.CSS定位：允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。

?

CSS 定位屬性允許你對元素進行定位。

屬性	描述
position	把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
top	定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right	定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom	定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left	定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow	設置當元素的內容溢出其區域時發生的事情。
clip	設置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。
vertical-align	設置元素的垂直對齊方式。
z-index	設置元素的堆疊順序。

?

2. 如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。

注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。

?

3. 設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

對比：相對定位是“相對于”元素在文檔中的初始位置，而絕對定位是“相對于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對于”最初的包含塊。

?

4. 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。（不占據空間，會覆蓋別的框）

如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”。

?

5. 浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。因此，創建浮動框可以使文本圍繞圖像。要想阻止行框圍繞浮動框，需要對該框應用?clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。

?

6. 類型（元素）選擇器匹配文檔語言元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每一個實例。（CSS 元素選擇器（類型選擇器）可以設置 XML 文檔中元素的樣式。）

?

7.選擇器分組：相同規則的選擇器放在規則左邊，通過逗號分隔。通過分組，創作者可以將某些類型的樣式“壓縮”在一起，這樣就可以得到更簡潔的樣式表。

通配選擇器（universal selector），顯示為一個星號（*）。該選擇器可以與任何元素匹配。

?

8.類選擇器：為了將類選擇器的樣式與元素關聯，必須將 class 指定為一個適當的值。有*應用于所有class為該值的元素，無*則應用于同名元素。類選擇器也可以結合元素選擇器來使用。

<p class="important">

This paragraph is very important.

</p>

p.important {color:red;}

多類選擇器：一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。通過把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）。

<p class="important warning">

This paragraph is a very important warning.

</p>

.important {font-weight:bold;}

.warning {font-style:italic;}

.important.warning {background:silver;}

注意：在 IE7 之前的版本中，不同平臺的 Internet Explorer 都不能正確地處理多類選擇器。

?

9. ID 選擇器：前面有一個 # 號，引用id屬性里的值。

區別 1：只能在文檔中使用一次

與類不同，在一個 HTML 文檔中，ID 選擇器會使用一次，而且僅一次。

區別 2：不能使用 ID 詞列表

不同于類選擇器，ID 選擇器不能結合使用，因為 ID 屬性不允許有以空格分隔的詞列表。

區別 3：ID 能包含更多含義（類選擇器需要知道特定的類型）

類似于類，可以獨立于元素來選擇 ID。#mostImportant {color:red; background:yellow;}

注意：類選擇器和 ID 選擇器可能是區分大小寫的。這取決于文檔的語言。HTML 和 XHTML 將類和 ID 值定義為區分大小寫，所以類和 ID 值的大小寫必須與文檔中的相應值匹配。

?

10.后代選擇器：規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符（combinator）。每個空格結合符可以解釋為“... 在 ... 找到”、“... 作為 ... 的一部分”、“... 作為 ... 的后代”，但是要求必須從右向左讀選擇器。

因此，h1 em 選擇器可以解釋為 “作為 h1 元素后代的任何 em 元素”。（無論間隔多遠層次多深）

?

11. 如果不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個元素的子元素，使用子元素選擇器（Child selector）。如果希望選擇只作為 h1 元素子元素的 strong 元素，可以這樣寫：

h1 > strong {color:red;}

這個規則會把第一個 h1 下面的strong 元素變為紅色。

?

12. 如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。如果要增加緊接在 h1 元素后出現的段落的上邊距，可以這樣寫：

h1 + p {margin-top:50px;}

這個選擇器讀作：“選擇緊接在 h1 元素后出現的段落，h1 和 p 元素擁有共同的父元素”。

轉載于:https://www.cnblogs.com/zccfrancis/p/11284139.html

總結

以上是生活随笔為你收集整理的CSS每日学习笔记（2）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。