CSS篇-2

4. `position` 的值分別是相對于哪個位置定位的？

position 屬性是 CSS 布局中一個非常核心的概念，它允許我們精確控制元素在文檔中的定位方式，從而脫離或部分脫離正常的文檔流。理解 position 的不同值以及它們各自的定位基準，是實現復雜頁面布局、彈窗、導航等效果的基礎。

position 屬性有五個主要的值：static、relative、absolute、fixed 和 sticky。我們來逐一分析它們各自的定位特點：

static (靜態定位)
- 定位基準： 沒有定位。
- 說明： 這是所有 HTML 元素的默認值。當一個元素的 position 屬性是 static 時，它會完全按照正常的文檔流（normal document flow）來布局。這意味著它會按照 HTML 源代碼中的順序，從上到下、從左到右依次排列。此時，top、right、bottom、left 和 z-index 屬性都將無效。
- 使用場景： 絕大多數元素默認就是 static 定位，通常不需要顯式設置。
relative (相對定位)
- 定位基準： 相對于元素自身在正常文檔流中的原始位置進行定位。
- 說明： 當一個元素設置為 position: relative; 時，它仍然會保留其在正常文檔流中占據的空間，不會脫離文檔流。然后，你可以使用 top、right、bottom、left 這四個屬性來“微調”它的位置。這個“微調”是相對于它本來應該在的位置進行的。
- 特點：
  - 不脫離文檔流： 元素所占據的空間依然保留，不會影響周圍其他元素的布局。
  - 可作為絕對定位的參照物： 這是 relative 最重要的用途之一。當一個父元素設置為 position: relative; 時，它的后代元素如果設置為 position: absolute;，就可以相對于這個父元素進行定位，而不再是 body 或根元素。
- 示例： div { position: relative; top: 20px; left: 30px; } 這會使 div 元素向下移動 20px，向右移動 30px，但它原先占據的位置依然保留。
absolute (絕對定位)
- 定位基準： 相對于其最近的、已定位的（position 值為 relative、absolute、fixed 或 sticky）祖先元素進行定位。 如果找不到任何已定位的祖先元素，那么它將相對于**初始包含塊（通常是 <html> 元素，也就是瀏覽器窗口的文檔區域）**進行定位。
- 說明： 當一個元素設置為 position: absolute; 時，它會完全脫離正常的文檔流。這意味著它不再占據任何空間，其后的兄弟元素會“填補”它原先的位置。然后，你可以使用 top、right、bottom、left 屬性來精確地設置它的位置。
- 特點：
  - 脫離文檔流： 這是與 relative 最主要的區別。
  - 層疊： 絕對定位的元素會創建新的堆疊上下文，可以通過 z-index 屬性控制其在垂直方向上的層疊順序。
  - 常用搭配： 通常與 position: relative; 的父元素配合使用，形成“父相子絕”的布局模式，這是一種非常常見的布局技巧。
- 示例：
```
<div style="position: relative; width: 200px; height: 200px; border: 1px solid red;"><span style="position: absolute; top: 10px; right: 10px; background: yellow;">我在這里</span>
</div>
```
  這里的 span 會相對于紅色的 div 元素，從上邊緣向下 10px，從右邊緣向左 10px 進行定位。
fixed (固定定位)
- 定位基準： 相對于瀏覽器窗口（或視口 - viewport）進行定位。 即使頁面滾動，固定定位的元素也會保持在屏幕上的相同位置。
- 說明： fixed 定位的元素也會完全脫離正常的文檔流。它的位置是相對于瀏覽器窗口的左上角來計算的。當用戶滾動頁面時，固定定位的元素會始終保持在屏幕上的固定位置，不會隨著滾動條的移動而移動。
- 特點：
  - 脫離文檔流： 與 absolute 類似。
  - 不隨頁面滾動： 核心特性，常用于創建固定在頂部的導航欄、側邊欄、返回頂部按鈕等。
  - z-index 有效： 可以通過 z-index 控制層疊順序。
- 示例： div.fixed-header { position: fixed; top: 0; left: 0; width: 100%; background: lightblue; } 這樣就會創建一個始終固定在瀏覽器窗口頂部的藍色頭部。
sticky (粘性定位) - CSS3 新增
- 定位基準：
  - 當元素在可視區域內時，它表現得像 position: relative;，即相對于其在正常文檔流中的位置進行定位。
  - 當元素滾動到預設的閾值（由 top、right、bottom、left 屬性定義）時，它會變成 position: fixed;，即相對于瀏覽器窗口進行定位，并“粘滯”在那個位置。
- 說明： sticky 定位是 relative 和 fixed 的結合體。它允許元素在特定條件下在 relative 和 fixed 之間切換。元素會首先按照正常的文檔流布局，但當它滾動到視口的某個特定點（例如 top: 0）時，就會“粘”在那個位置，直到其父容器的底部離開視口。
- 特點：
  - 不脫離文檔流 (初始狀態)： 在未觸發粘性效果時，元素仍占據其在文檔流中的空間。
  - 行為動態： 隨著滾動而改變定位行為。
  - 父容器限制： 粘性元素只會在其直系父容器內粘滯，當父容器滾出視口時，粘性元素也會隨之消失。
- 示例： 常見的應用是導航欄，在頁面頂部時正常顯示，滾動到一定位置后，會固定在頂部，提供便捷的導航。
```
.sticky-header {position: sticky;top: 0; /* 當元素頂部達到視口頂部時粘滯 */background-color: #eee;padding: 10px;
}
```
- 提醒： sticky 是 CSS3 中新增的屬性，它為滾動時的交互提供了非常方便的解決方案，避免了使用 JavaScript 來實現類似的效果。

總結表格：

`position` 值	是否脫離文檔流	定位基準	`top/right/bottom/left` 屬性作用	主要用途
`static`	否	無（正常文檔流）	無效	默認值，正常布局
`relative`	否	自身原始位置	微調位置，保留空間	微調、作為絕對定位元素的參照物
`absolute`	是	最近的已定位祖先元素，或初始包含塊	精確定位	覆蓋、彈窗、復雜布局（父相子絕）
`fixed`	是	瀏覽器窗口（視口）	精確定位	固定導航、返回頂部按鈕、彈窗
`sticky`	否（初始）/ 是（粘滯時）	自身原始位置 / 瀏覽器窗口（視口）	定義粘滯觸發位置	粘性導航欄、側邊欄標題等，隨滾動動態切換定位方式

正確理解和運用 position 屬性，能讓開發者在頁面布局方面擁有極大的靈活性和控制力，實現各種復雜的視覺效果和交互體驗。

5. 請說明 `position: absolute` 和 `float` 屬性的異同。

position: absolute 和 float 都是 CSS 中用于改變元素在頁面上定位方式的屬性，它們都能使元素脫離正常的文檔流。然而，它們的設計目的、工作機制和對周圍元素的影響有著本質的區別。理解這些異同，對于進行精確的頁面布局和避免布局問題至關重要。

相同點 (Similarties)：

脫離正常文檔流 (Out of Normal Flow)：
- 無論是設置 float 屬性（非 none 值）還是 position: absolute，受影響的元素都會脫離正常的文檔流。這意味著它們在布局時不再占據其原有的空間。
可設置寬高 (Can Set Width/Height)：
- 當對一個內聯元素（如 <span>、<a>使用position: absolute時，這些內聯元素會自動轉化為塊級元素的特性，即它們會支持width、height、margin、padding等塊級元素的屬性。它們不再像內聯元素那樣只根據內容決定寬高，而是可以明確設置尺寸。
層疊上下文 (Stacking Context)：
- 盡管它們的機制不同，但當元素被設置為 position: absolute 或 float (非 none) 時，它們都可能創建新的層疊上下文。這意味著它們可以通過 z-index 屬性來控制它們在垂直方向上的堆疊順序，從而決定哪個元素會覆蓋在另一個元素之上。

不同點 (Differences)：

脫離文檔流的程度和方式：
- float： 元素脫離文檔流，但它仍然部分地保留了其在文檔流中的“存在感”。它會浮動到其父容器的左側或右側，直到遇到父容器的邊緣或另一個浮動元素。雖然它不再占據空間，但它依然會影響其后續非浮動兄弟元素的文本內容，使其圍繞浮動元素進行排列。
  - 特點： 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框（父元素）或另一個浮動框的邊框為止。這意味著浮動元素之間會相互影響，并且受限于父元素的邊界。
- position: absolute： 元素是完全徹底地脫離了正常的文檔流。它不再占據任何空間，就像它從 HTML 結構中被“剪切”出來了一樣。文檔流中的其他元素會忽略它的存在，并且會按照它不存在的方式進行布局。
  - 特點： 絕對定位的元素會覆蓋文檔流中的其他元素，即產生“遮蓋現象”。它完全獨立于文檔流，可以精確地放置在其定位上下文（通常是最近的已定位祖先元素）內的任何位置。
定位的參照物：
- float： 浮動元素是相對于其父元素的“內容區域”進行浮動的，并且會沿著其所在的文本流進行排列，或者與同級的浮動元素并排。它更多地是一種“流式布局”的微調。
- position: absolute： 絕對定位的元素是相對于其最近的已定位祖先元素（即 position 值非 static 的祖先元素）進行定位的。如果沒有這樣的祖先，則相對于初始包含塊（通常是 <html> 元素，也就是瀏覽器視口）進行定位。它的定位是精確的，通過 top, right, bottom, left 屬性控制。
對父元素高度的影響：
- float： 這是浮動最常見的問題之一。當子元素浮動時，父元素由于無法感知到浮動子元素的高度，會導致高度塌陷。需要通過清除浮動（如 overflow: hidden 或偽元素 clearfix）來解決。
- position: absolute： 由于絕對定位元素完全脫離文檔流，它們不會影響父元素的高度。父元素的高度將由其非絕對定位的子元素來決定。
布局目的和應用場景：
- float： 早期主要用于實現多列布局（如博客文章的側邊欄和主內容區）、圖文混排（文字環繞圖片）等。它更適合創建塊級元素之間的水平排列關系。隨著 Flexbox 和 CSS Grid 的出現，其在復雜布局中的地位已被取代，但仍用于簡單的圖文混排。
- position: absolute： 主要用于實現元素的精確位置控制，例如創建模態框、工具提示（tooltip）、下拉菜單、徽章（badge）、遮罩層等，以及在父元素內部進行子元素的疊放和覆蓋。它非常適合實現重疊效果和復雜組件的內部定位。

總結表格：

特性	`float`	`position: absolute`
脫離文檔流	是（部分）	是（完全）
影響兄弟元素	影響后續非浮動兄弟元素的內容環繞	不影響兄弟元素，兄弟元素會填補其原位
對父元素高度	導致父元素高度塌陷，需要清除浮動	不影響父元素高度
定位參照物	父元素的內容區域，沿文本流浮動	最近的已定位祖先元素，或視口
是否占據空間	不占據（但影響內容流）	不占據
`z-index`	有效（創建層疊上下文）	有效（創建層疊上下文）
典型應用場景	多列布局（舊）、圖文混排	精確定位、覆蓋、彈窗、層疊效果

理解這些異同是進行有效 CSS 布局的基礎。在現代前端開發中，我們通常會根據具體的布局需求，靈活選擇 float、position、Flexbox 或 CSS Grid 等不同的布局技術，以達到最佳效果和可維護性。

6. CSS 選擇器（符）有哪些？

CSS 選擇器是 CSS 的核心，它們是樣式規則的“矛”，精準地指向 HTML 文檔中需要應用樣式的元素。掌握各種選擇器是前端開發者的基本功，因為它直接決定了我們能否高效、準確地控制頁面外觀。CSS 選擇器種類繁多，大致可以分為以下幾大類：

基本選擇器 (Basic Selectors)：
- ID 選擇器 (ID Selector)：
  - 語法： # 后面跟元素的 id 屬性值。
  - 作用： 選中 HTML 中具有特定 id 屬性的唯一元素。一個 id 值在整個 HTML 文檔中應該是獨一無二的。
  - 示例： #header { color: blue; } 會選中 <div id="header"> 元素。
  - 特點： 優先級最高（在基本選擇器中），但因為其唯一性，不適合復用。
- 類選擇器 (Class Selector)：
  - 語法： . 后面跟元素的 class 屬性值。
  - 作用： 選中 HTML 中具有特定 class 屬性值的所有元素。一個元素可以有多個類，一個類也可以應用于多個元素。
  - 示例： .btn { padding: 10px; } 會選中所有 class="btn" 的元素。
  - 特點： 高度可復用，是日常開發中使用最頻繁的選擇器之一。
- 標簽選擇器 / 元素選擇器 (Type Selector / Tag Selector)：
  - 語法： 直接使用 HTML 元素的標簽名。
  - 作用： 選中 HTML 文檔中所有該類型的元素。
  - 示例： p { font-size: 14px; } 會選中所有 <p> 元素。
  - 特點： 最基礎的選擇器，通常用于設置元素的默認樣式。
- 通配符選擇器 (Universal Selector)：
  - 語法： *
  - 作用： 選中 HTML 文檔中的所有元素。
  - 示例： * { margin: 0; padding: 0; } 常用于重置所有元素的默認內外邊距。
  - 特點： 優先級最低（除繼承外），會選中頁面所有元素，需謹慎使用，以免影響性能或產生不必要的樣式。
組合選擇器 (Combinator Selectors)：
組合選擇器通過不同的符號將多個簡單選擇器連接起來，從而根據元素之間的關系來選中目標元素。
- 后代選擇器 (Descendant Selector)：
  - 語法： 用空格分隔兩個或多個選擇器。
  - 作用： 選中作為第一個選擇器指定元素的所有后代元素（包括子元素、孫子元素等）。
  - 示例： div p { color: red; } 會選中所有在 <div> 元素內部的 <p> 元素。
- 子選擇器 (Child Selector)：
  - 語法： 用 > 符號分隔兩個選擇器。
  - 作用： 選中作為第一個選擇器指定元素的直接子元素。
  - 示例： ul > li { list-style: none; } 只會選中 <ul> 的直接子元素 <li>，而不會選中孫子輩的 <li>。
- 相鄰兄弟選擇器 (Adjacent Sibling Selector)：
  - 語法： 用 + 符號分隔兩個選擇器。
  - 作用： 選中緊接在第一個選擇器指定元素之后的那個兄弟元素（即它們有共同的父元素，并且第二個元素緊跟在第一個元素后面）。
  - 示例： h1 + p { margin-top: 20px; } 會選中緊跟在 <h1> 之后的第一個 <p> 元素。
- 通用兄弟選擇器 (General Sibling Selector)：
  - 語法： 用 ~ 符號分隔兩個選擇器。
  - 作用： 選中與第一個選擇器指定元素具有相同父元素，并且位于第一個選擇器之后的所有兄弟元素。
  - 示例： h1 ~ p { background-color: yellow; } 會選中 <h1> 之后的所有 <p> 兄弟元素。
屬性選擇器 (Attribute Selectors)：
- 語法： 用方括號 [] 包裹屬性名，可選地包含屬性值及匹配規則。
- 作用： 根據元素的屬性是否存在或屬性值是否匹配來選中元素。
- 常見形式：
  - [attribute]：選中具有該屬性的元素。示例： [disabled] 選中所有有 disabled 屬性的元素。
  - [attribute="value"]：選中屬性值為特定值的元素。示例： input[type="text"] 選中所有 type 屬性為 text 的 input 元素。
  - [attribute^="value"]：選中屬性值以特定字符串開頭的元素。
  - [attribute$="value"]：選中屬性值以特定字符串結尾的元素。
  - [attribute*="value"]：選中屬性值包含特定字符串的元素。
  - [attribute~="value"]：選中屬性值包含用空格分隔的特定單詞的元素（單詞必須是完整的）。
  - [attribute|="value"]：選中屬性值以特定字符串開頭，且后跟連字符 - 的元素（常用于語言代碼）。
- 特點： 非常靈活，適用于需要根據元素屬性狀態或值來施加樣式的情況。
偽類選擇器 (Pseudo-classes)：
- 語法： 單冒號 : 后面跟偽類名。
- 作用： 選中處于某種特定狀態的元素，或者根據元素在文檔樹中的特定位置/結構來選中元素。它們描述的是一種“抽象的”或“臨時的”狀態，而不是實際的 HTML 元素或屬性。
- CSS3 建議： 為了與偽元素區分開來，CSS3 建議偽類使用單冒號 :。
- 常見偽類：
  - 用戶行為偽類： :hover (鼠標懸停), :active (被激活), :focus (獲得焦點), :visited (已訪問鏈接), :link (未訪問鏈接)。
  - 結構性偽類： :first-child (第一個子元素), :last-child (最后一個子元素), :nth-child(n) (第 n 個子元素), :nth-of-type(n) (第 n 個特定類型的子元素)。
  - 表單偽類： :enabled, :disabled, :checked, :valid, :invalid。
  - 否定偽類： :not(selector) (不匹配指定選擇器的元素)。
- 示例： a:hover { text-decoration: underline; } (鼠標懸停在鏈接上時加下劃線)；li:nth-child(odd) { background-color: #f0f0f0; } (選中奇數序的列表項)。
偽元素選擇器 (Pseudo-elements)：
- 語法： 雙冒號 :: 后面跟偽元素名。
- 作用： 選中元素中特定的一部分，或者在元素內容的前后插入生成的內容。它們不對應真實的 HTML 元素，而是由 CSS 引擎在渲染時“虛擬”地創建出來的。
- CSS3 建議： 為了與偽類區分開來，CSS3 建議偽元素使用雙冒號 ::。早期版本（如 CSS2.1）也可以使用單冒號，但雙冒號是更標準的寫法。
- 常見偽元素：
  - ::before：在元素內容前面插入生成的內容。常與 content 屬性配合使用。
  - ::after：在元素內容后面插入生成的內容。常與 content 屬性配合使用（例如用于清除浮動）。
  - ::first-letter：選中元素文本內容的第一個字母。
  - ::first-line：選中元素文本內容的第一行。
  - ::selection：選中用戶高亮（選擇）的文本。
  - ::placeholder：選中表單輸入框的占位符文本。
- 示例： p::first-letter { font-size: 2em; font-weight: bold; } (讓段落的第一個字母變大變粗)。