Front-end Notes

Appearance

Note 8 ​

CSS3 定位 ​

positon属性指定了元素的定位类型（静态的，相对的，绝对的或固定的）,默认值：static

JavaScript语法：object.style.position="absolute"

值描述
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
元素的位置通过 left, top, right 以及 bottom 属性进行规定。能很准确的将元素移动到想要的位置。
使元素的位置与文档流无关，因此不占据空间。
fixed生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 left, top, right 以及 bottom 属性进行规定。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
relative生成相对定位的元素，相对于元素默认的位置进行定位（相对其正常位置）。
因此，left:20 会向元素的 LEFT 位置添加 20 像素。同样通过top、bottom、left以及bottom来明确元素的位置。
移动相对定位元素，但它原本所占的空间不会改变。
sticky粘性定位，该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
粘性定位的元素依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
inherit规定应该从父元素继承 position 属性的值。
initial设置该属性为默认值，详情查看 CSS initial 关键字。

PPI & DPI & DPR ​

PPI (Pixels Per Inch，每英寸像素数) ​

  • 定义：PPI 是指在一英寸长度内可以容纳的像素数量。它是一个度量单位，用来衡量显示设备的像素密度。PPI 通常用于屏幕显示设备，如手机、电视和电脑显示器
  • 应用：PPI 常用于描述屏幕的清晰度。PPI 越高，屏幕显示的图像就越细腻，细节也就越丰富。

DPI (Dots Per Inch，每英寸点数) ​

  • 定义：DPI 是一个更通用的术语，通常用来描述打印分辨率，即每英寸长度内可以打印的点（墨点）数量。
  • 应用：DPI 用于衡量打印机、扫描仪等输出设备的分辨率。DPI 越高，打印或扫描的图像质量就越高。
  • 显示DPI：图像在屏幕上显示时的分辨率，取决于屏幕的尺寸和分辨率

DPR (Device Pixel Ratio，设备像素比) ​

  • 定义：DPR 是指显示设备的物理像素与CSS像素的比率。CSS像素是一种虚拟的像素单位，用于网页设计中。
  • 应用：DPR 用于处理高分辨率显示设备上的图像缩放问题。例如，一个具有2倍DPR的设备，其物理像素是CSS像素的两倍。

区别说明 ​

  • 应用领域：PPI 主要用于屏幕显示设备的像素密度，而 DPI 主要用于打印和扫描设备的分辨率。DPR 是一个与Web设计相关的术语，用于处理不同分辨率设备上的图像和布局。
  • 度量单位：PPI 和 DPI 都是以英寸为单位来度量像素或点的数量，但它们分别用于不同的设备和场景。
  • 与设备分辨率的关系：PPI 是设备固有的属性，而 DPI 通常与打印质量相关。DPR 是一个比率，用来调整Web内容在不同设备上的表现。

CSS 兄弟选择器(+ & ~) ​

在 CSS 中，兄弟选择器（Sibling Selectors）用于选择与某个元素具有相同父元素的相邻或后续兄弟元素。以下是两种常见的兄弟选择器及其用法：

1. 相邻兄弟选择器（Adjacent Sibling Selector） ​


语法：element1 + element2
作用：选择紧跟在 element1 之后的第一个 element2 元素。

示例： ​

html
<div>
  <h2>标题</h2>
  <p>段落1（被选中）</p>  <!-- 紧跟在 h2 后的第一个 p -->
  <p>段落2</p>
</div>
css
h2 + p {
  color: red;  /* 仅段落1变为红色 */
}

2. 通用兄弟选择器（General Sibling Selector） ​


语法：element1 ~ element2
作用：选择 element1 之后的所有 element2 兄弟元素（不要求直接相邻）。

示例： ​

html
<div>
  <h2>标题</h2>
  <p>段落1（被选中）</p>
  <div>分隔块</div>
  <p>段落2（被选中）</p>  <!-- 所有 h2 后的 p 均被选中 -->
</div>
css
h2 ~ p {
  color: blue;  /* 段落1和段落2均变为蓝色 */
}

核心区别 ​

特性+（相邻兄弟）~（通用兄弟）
选择范围仅紧邻的下一个元素后续所有符合条件的元素
间隔元素不允许中间有其他元素允许中间有其他元素
严格性严格（直接相邻）宽松（后续任意位置）

实际应用场景 ​

  1. 表单验证提示：

    css
    input:invalid + span.error {
  display: block;  /* 输入框无效时显示紧邻的错误提示 */
}

  2. 列表项样式控制：

css
li.active ~ li {
  opacity: 0.5;  /* 激活项之后的所有列表项变半透明 */
}
  1. 标题与段落间距：
css
h2 + p {
  margin-top: 0;  /* 消除标题后第一个段落的上边距 */
}

注意事项 ​

  1. 顺序敏感： 兄弟选择器仅对目标元素之后的兄弟生效。例如：
html
<p>段落A</p>
<h2>标题</h2>
<p>段落B</p>

h2 + p 会选中 段落B，但 p + h2 无效（因 h2 在 p 之后）。

  1. 兼容性：
  • 所有现代浏览器均支持 + 和 ~（包括 IE8+）。
  1. 性能影响：
    兄弟选择器的性能通常较好，但应避免在深层嵌套或超大文档中滥用。

总结 ​

  • +：用于精准控制直接相邻的兄弟元素。
  • ~：用于批量选择后续所有符合条件的兄弟元素。

合理使用兄弟选择器可以减少冗余的类名定义，提升代码可维护性。

width: 100% 的百分比参考什么？ ​

在 CSS 中，width: 100% 的百分比是相对于元素的包含块（Containing Block）的宽度计算的，但具体参考的是包含块的 内容区域（content box） 还是 边框盒（border box），取决于元素的定位方式和包含块的定义。

一、包含块（Containing Block）的定义 ​


包含块是 CSS 布局中计算元素尺寸和位置的参考基准，其确定规则如下：

元素定位方式包含块的定义
静态定位（static）最近的块级祖先元素的内容区域（content box）。
相对定位（relative）同静态定位，但元素自身可通过 top/right/bottom/left 偏移。
绝对定位（absolute）最近的非 static 定位祖先元素的内边距区域（padding box）。
固定定位（fixed）视口（viewport）的内边距区域（通常等同于视口尺寸）。
粘性定位（sticky）最近的滚动祖先的内容区域，若没有则同相对定位。

二、width: 100% 的具体行为 ​

  • 默认行为：
    若未显式设置 box-sizing，元素的 width: 100% 是相对于包含块的 内容区域宽度（content box） 计算的。

    css
    .parent {
  width: 200px;       /* 内容区域宽度为 200px */
  padding: 20px;      /* 内边距增加 40px（左右各 20px） */
  border: 5px solid;  /* 边框增加 10px（左右各 5px） */
}

.child {
  width: 100%;        /* 实际宽度为 200px（父元素内容区域宽度） */
}
    • 子元素的 width: 100% 仅覆盖父元素的内容区域，不包含父元素的 padding 和 border。
    • 若子元素自身有 padding 或 border，可能导致溢出父容器（需结合 box-sizing 调整）。

  • 绝对定位的特殊情况：
    绝对定位元素的 width: 100% 是相对于包含块的 内边距区域宽度（padding box） 计算的（即包含 padding 的宽度）。

    css
    .parent {
  position: relative;
  width: 200px;
  padding: 20px;      /* 内边距增加 40px */
}

.child {
  position: absolute;
  width: 100%;        /* 实际宽度为 240px（父内容区域 200px + 内边距 40px） */
}

三、box-sizing 的影响 ​


通过 box-sizing 属性，可以改变 width 的参考基准：

box-sizing 值width: 100% 的参考基准
content-box（默认）包含块的内容区域宽度（不包含 padding/border）。
border-box包含块的边框盒宽度（包含 padding 和 border）。

示例： ​

css
.parent {
  width: 200px;
  padding: 20px;
  border: 5px solid;
}

.child {
  box-sizing: border-box;  /* 宽度包含 padding 和 border */
  width: 100%;             /* 实际宽度为 200px（父内容区域宽度） */
  padding: 10px;           /* 内边距从 200px 中扣除 */
  border: 2px solid;       /* 边框从 200px 中扣除 */
}

四、常见问题与场景 ​

1. 子元素溢出父容器 ​

html
<div class="parent">
  <div class="child">内容</div>
</div>
css
.parent {
  width: 200px;
  padding: 20px;
}

.child {
  width: 100%; /* 200px */
  padding: 20px; /* 总宽度变为 200px + 40px = 240px → 溢出父容器 */
}

解决方案：

  • 为子元素设置 box-sizing: border-box，使其宽度包含内边距和边框。

2. 绝对定位元素的宽度适配 ​

css
.parent {
  position: relative;
  width: 200px;
  padding: 20px;
}

.child {
  position: absolute;
  width: 100%; /* 240px（父内容区域 200px + 内边距 40px） */
}

五、总结 ​

  • width: 100% 默认相对于包含块的 content-box 宽度。
  • 绝对定位元素的 width: 100% 相对于包含块的 padding-box 宽度。
  • 使用 box-sizing: border-box 可让 width 包含 padding 和 border，避免布局溢出。

理解包含块的定义和 box-sizing 的作用，是控制元素尺寸和实现精准布局的关键。

Released under the MIT License.

Copyright © 2023-present the Muse Catcher