2301_82023822的博客

存储颜色、尺寸、字体等重复使用的值。

（假设选择器优先级相同）。如果媒体查询顺序错误，会导致样式覆盖逻辑混乱。

和。

1vw= 视口宽度的1%例如：视口宽度为1200px，则。1vh= 视口高度的1%例如：视口高度为800px，则。

以下是 CSS 中实现水平居中、垂直居中以及同时水平垂直居中的。

用于控制或的。（除非通过display转换为行内块或表格元素）。<span><img><input><button>等。<td><th>。的元素。：如，元素相对于基线向上或向下偏移。：基于元素的计算偏移量，如。<img>下方出现空隙。：图片默认对齐到基线（baseline），与父元素基线下的预留空间产生间隙。：设置的<div>未垂直居中。：块级元素默认，不支持。：多行文本或元素垂直对齐不一致。：统一设置或调整。控制行高，影响的基线位置。baselinedisplay用于控制：单行文字在容器内垂直居中。

经典布局的意义圣杯和双飞翼布局是早期 CSS 布局的经典解决方案，理解其原理有助于掌握 CSS 核心机制（如浮动、负边距）。面试中常被考察，体现对传统布局技术的理解。现代布局推荐优先使用Flexbox或Grid，代码更简洁、维护成本更低。仅在兼容旧浏览器时考虑传统方案。

CSS Grid 是一种强大的二维布局系统，能够以行和列的方式精确控制网页布局。它比传统的布局方式（如浮动、定位）更灵活、更强大，适合构建复杂的响应式网页。当项目超出定义的网格范围时，浏览器会自动创建隐式网格。（行间距 20px，列间距 30px）。（最小 100px，最大 1fr）。是线性布局的终极解决方案，擅长处理。是二维布局的革命性工具，擅长构建。（重复 3 列，每列宽度相等）。：定义行和列之间的间距（替代。（行和列间距均为 10px）。（从第 1 列到第 3 列）。：所有项目的水平对齐方式（

CSS 动画允许通过定义关键帧（@keyframes）和动画属性（animation）实现复杂的动态效果，相比transition更灵活，支持多阶段控制和循环播放。

属性作用示例值定义 3D 元素的视距1000px子元素保留 3D 位置调整视角位置top left控制元素背面是否可见hiddenrotate3d()绕自定义轴旋转。

转换类型函数核心作用常用场景平移移动元素位置微调布局、动画位移旋转rotate()改变元素角度图标旋转、卡片翻转缩放scale()调整元素大小悬停放大、焦点突出倾斜skew()倾斜元素形状斜切设计、动态变形转换原点定义变换基准点绕特定点旋转、自定义缩放中心。

线性渐变：适用于水平/垂直/对角线颜色过渡。径向渐变：适合圆形/椭圆发光、光斑效果。圆锥渐变：专为色轮、角度指示设计。重复渐变：创建条纹、网格等重复图案。组合使用：可叠加多渐变或与图片混合，实现复杂视觉效果。

标准流（Normal Flow）是浏览器默认的布局方式，元素按照 HTML 的书写顺序从上到下、从左到右排列，遵循。

目录一、定位方式（Positioning）1. 相对定位（position: relative）2. 绝对定位（position: absolute）3. 固定定位（position: fixed）4.定位居中二、堆叠顺序（z-index）三、CSS 精灵（CSS Sprites）四、字体图标（Icon Fonts）五、修饰属性1. 透明度（opacity）2. 光标类型（cursor）示例1：示例2：作用：相对于元素自身原始位置进行偏移，不脱离文档流。属性： / / / ：偏移距离。示例：

父子级的外边距塌陷是 CSS 中常见的布局问题，当父元素和第一个（或最后一个）子元素的垂直外边距直接接触时，浏览器会将两者的外边距合并（取最大值），导致父元素和子元素一起移动。它是一个独立的渲染区域，内部元素的布局不会影响外部元素，反之亦然。：上下相邻的两个块级元素，及相邻的兄弟元素，它们的垂直外边距会合并。：父子级的标签，子级添加上外边距会产生塌陷问题，导致父级一起向下移动。：父子元素均未脱离文档流（非浮动、非绝对定位）。：仅发生在垂直（上下）外边距之间。：阴影扩展（可选，默认 0）。

多个样式源（作者、用户、浏览器默认）按优先级叠加。

结构伪类选择器根据元素在文档树中的位置或结构关系进行选择。伪元素选择器用于在元素内容前后插入虚拟元素或修饰特定部分。：选择父元素的第 n 个子元素（正向或逆向计数）。：选择同类型元素中的第 n 个（正向或逆向计数）。伪类选择器用于定义元素的特定状态或结构位置。：选择紧接在前一个元素后的第一个兄弟元素。：选择所有嵌套在祖先元素内的后代元素。：选择父元素的第一个或最后一个子元素。：选择前一个元素之后的所有同级元素。：选择作为父元素唯一子元素的元素。：元素获得焦点时（如表单输入）。：选择父元素中唯一类型的元素。

CSS（层叠样式表）是用于描述网页外观和格式的核心技术。CSS基本结构选择器 {属性: 值;属性: 值;选择器：定位HTML元素（如p.class#id属性和值：定义样式规则（如color: red;优先使用外部样式表样式与结构分离，便于维护和复用。利用浏览器缓存提升性能。避免滥用内联样式内联样式优先级高，难以覆盖，且不利于维护。慎用 @import推荐使用<link>标签替代@import，避免阻塞渲染。模块化 CSS将样式按功能或组件拆分为多个文件，通过<link>引入。u。

什么是 HTML？HTML 是一种用于创建网页结构的标记语言，通过标签（Tag）定义内容的结构和呈现方式。浏览器解析 HTML 文档后，将其渲染为可视化网页。