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; } (让段落的第一个字母变大变粗)。