1. 说一下 px / rem / em / rpx / vw / vh 区别是什么 ?

1、核心区别对比表

单位 参考基准 类型 核心使用场景
px 屏幕物理像素 绝对单位 固定尺寸、边框、小图标
em 当前元素 / 父元素 font-size 相对单位 文字相关的自适应（行高、间距）
rem 根元素（html）font-size 相对单位 多端响应式布局（统一基准）
rpx 750px 设计稿 / 屏幕宽度 响应式单位 微信小程序开发
vw/vh 视口宽度 / 高度的 1% 视口单位 全屏响应式布局（现代首选）
% 父元素对应属性值 相对单位 流式布局、容器内自适应
2. 像素（px）
  • 定义：像素（Pixel）是 CSS 中最基础的绝对单位，1px 对应屏幕上的一个物理像素点.
3. 根元素字体大小（rem）
  • 定义：rem（Root EM）是相对单位，1rem = HTML 根元素（<html>）的font-size值（默认情况下，浏览器<html>的font-size是 16px，所以 1rem=16px）。
  • 特点：所有元素的 rem 值都基于根节点，修改根节点的font-size，所有用 rem 的元素会统一缩放，适合全局响应式。
4. 元素字体大小（em）
  • 定义：em 是相对单位，1em = 当前元素的父元素font-size值（会嵌套继承，容易踩坑）。
5. 响应式像素（rpx）
  • 定义：rpx（Responsive Pixel）是微信小程序 / 支付宝小程序的专属单位，设计初衷是 “一键适配所有手机屏幕”。
6. 视口单位（vw/vh）
  • 定义：
    • 1vw = 视口（浏览器可视区域）宽度的 1%；
    • 1vh = 视口高度的 1%；
    • 补充：vmin（vw 和 vh 的最小值）、vmax（vw 和 vh 的最大值）
7. 百分比 %
  • 定义：% 是相对单位，相对于父元素的对应属性值（宽度 % 参考父元素宽度，高度 % 参考父元素高度）。
  • 示例： 
    .parent { 
    width: 200px; 
    height: 100px; 
}
.child { 
  width: 50%;   /* 100px，参考父元素宽度 */
  height: 80%;  /* 80px，参考父元素高度 */
}
  • 使用场景：
    • 流式布局（如侧边栏宽度 20%）、自适应宽高（如图片宽度 100% 填满容器）。
8、实战选型建议
  1. 网页端：
    • 基础布局（宽 / 高 / 边距）：优先用 rem + 媒体查询（适配不同屏幕）；
    • 全屏元素（banner、弹窗）：用 vw/vh；
    • 固定尺寸（边框、图标、按钮大小）：用 px；
    • 局部文字适配：少量用 em。
  2. 小程序端：
    • 所有尺寸优先用 rpx，无需手动计算，直接按设计稿写值；
    • 固定小元素（如图标）可补充用 px。
  3. PC 端：
    • 优先用 px（精准控制），配合 vw/vh 做响应式大屏布局。
总结
  • 固定不变选 px：需要精准尺寸的场景（边框、图标）；
  • 网页响应式选 rem/vw：rem 适合全局控制，vw 适合按屏幕比例适配；
  • 小程序选 rpx：一键适配所有手机；
  • 局部缩放选 em：仅限简单嵌套场景（避免复杂层级）。

2. 了解过 TailwindCSS 吗 ?

这是前端选型时的关键考量 ——Tailwind 作为 “原子化 CSS 框架”，和传统的 Bootstrap、ElementUI 等组件化框架差异极大，我会用通俗易懂的语言拆解它的优缺点

一、TailwindCSS 的核心优点（为什么越来越多项目用它）
1. 极致的开发效率：“不用写自定义 CSS，直接拼类名”
  • 核心逻辑：Tailwind 提供了上万种原子化类名（如 w-10= 宽度 10px、bg-red-500= 红色背景、flex= 弹性布局），开发时直接给 HTML 加类名，不用新建 / 修改 CSS 文件。
  • 对比传统方式：
    • 传统 CSS：写 <div class="btn"> → 再写 .btn { width: 100px; background: red; }；
    • Tailwind：直接写 <div class="w-25 bg-red-500">，一步到位。
  • 实际收益：减少 80% 以上的自定义 CSS 代码，不用来回切换 HTML/CSS 文件，新手也能快速写出规范样式。
2. 样式统一且可维护：“告别样式冲突，全局无冗余”
  • 预设设计系统：Tailwind 的类名基于统一的设计规范（如间距 0.5rem/1rem/1.5rem、颜色 red-100 到 red-900），团队所有人用同一套类名，不会出现 “有人用 margin: 15px，有人用 margin: 16px” 的混乱。
  • 无样式污染：原子化类名都是 “单一职责”（如 mt-4 只控制 “margin-top: 1rem”），不会像自定义 CSS 那样出现 “改一个类名影响全局” 的问题。
  • 易复用：常用样式可通过 @apply 封装成自定义类（如 @apply w-25 bg-red-500 rounded;），既保留灵活性，又避免重复写类名。
3. 高度可定制：“能适配任何设计风格，不局限于框架预设”
  • 自定义配置：通过 tailwind.config.js 可修改 / 扩展所有预设（如自定义颜色 primary: '#123456'、自定义间距 100: '25rem'），完全摆脱框架的 “设计枷锁”（对比 Bootstrap 改样式要覆盖大量默认类）。
  • 按需编译：生产环境可通过 PurgeCSS 自动删除未使用的类名，最终生成的 CSS 文件通常只有几 KB（传统框架动辄几百 KB），加载速度更快。
4. 响应式布局超简单：“一套类名适配所有屏幕”
  • 内置响应式前缀（sm:/md:/lg:/xl:），不用写媒体查询： 
    <!-- 小屏宽度100%，大屏宽度50% -->
<div class="w-full md:w-1/2"></div>
  • 对比传统 CSS：需要写 @media (min-width: 768px) { .box { width: 50%; } }，代码量翻倍且易出错。
5. 学习成本低：“新手友好，不用记复杂 CSS 语法”
  • 不用死记 calc()/flex-wrap/transition 等复杂 CSS 属性，只需记 Tailwind 的类名规则（如 mt-[数字]=margin-top、bg-[颜色]= 背景色），半天就能上手。
  • 官方文档自带搜索功能，不懂的类名查一下就能用，比查 CSS 手册效率高。
二、TailwindCSS 的核心缺点（这些坑要提前避）
1. HTML 类名冗长：“标签变‘长串字符’，可读性下降”
<button class="w-25 h-10 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg shadow-md transition-colors duration-300">按钮</button>

2. 有一定的配置 / 部署成本：“初始化和编译需要配置，不是开箱即用”
  • 新手容易卡壳的点：
    1. 需配置 tailwind.config.js 才能自定义样式；
    2. 需配置 PostCSS 才能编译 Tailwind；
    3. 生产环境需配置按需编译，否则 CSS 文件会很大（未优化的 Tailwind 原始文件有几 MB）。
3. 团队协作需规范：“类名使用混乱会抵消优势”
  • 若团队没有统一规范（如 “什么时候用 @apply 封装类名”“颜色只用预设的 primary/secondary”），可能出现：
    • 有人用 bg-[#123456] 手写颜色，有人用 bg-primary；
    • 有人堆砌几十行类名，不封装复用。
  • 最终导致 HTML 可读性更差，维护成本反而上升。
三、优缺点总结表（快速对比）
维度 优点 缺点
开发效率 无需写自定义 CSS，响应式布局简单 HTML 类名冗长，可读性下降
样式维护 统一设计规范，无样式冲突，按需编译 配置 / 部署有成本，纯静态项目使用不便
灵活性 高度可定制，适配任何设计风格 依赖工具链，无 npm 环境体验差
学习成本 类名规则简单，新手易上手 易让新手忽略 CSS 基础原理
团队协作 样式规范统一，减少沟通成本 无规范时类名混乱，抵消优势

    3. 如何清除浮动？

    • 答案：浮动会导致父元素高度塌陷，清除方法：
      1. 额外标签法：在浮动元素后加空标签 <div style="clear: both;"></div>（简单但冗余）。
      2. 父元素触发 BFC：如 overflow: hidden（推荐，简洁）。
      3. 伪元素法（最佳实践）： 
        .parent::after {
  content: "";
  display: block;
  clear: both;
}
.parent { zoom: 1; } /* 兼容 IE6/7 */

    4. 什么是 BFC？如何触发 BFC？BFC 有什么作用？

    一、什么是 BFC？

    BFC（Block Formatting Context），即块级格式化上下文，可以把它理解为：

    一个独立的 “布局容器”，容器内部的元素布局完全不受外部影响，同时容器内的元素也不会影响到外部元素。

    你可以把 BFC 想象成一个 “隔离区”—— 这个区域有自己的一套布局规则，内部元素的排列、浮动、边距等都只会在这个隔离区内生效，不会和外部元素产生布局冲突。

    二、如何触发 BFC？

    只要给元素设置以下任意一个 CSS 属性 / 值，就能触发该元素成为一个 BFC 容器：

    /* 触发BFC的常见方式 */
.element {
  /* 1. 根元素（html/body，天然是BFC） */
  /* 2. 浮动元素（float不为none） */
  float: left; /* 或 right */
  
  /* 3. 绝对定位/固定定位元素 */
  position: absolute;
  position: fixed;
  
  /* 4. 行内块元素 */
  display: inline-block;
  
  /* 5. 弹性盒/网格布局元素 */
  display: flex;    /* 或 inline-flex */
  display: grid;    /* 或 inline-grid */
  
  /* 6. overflow不为visible */
  overflow: hidden; （最常用、最推荐的方式） /* 或 auto、scroll */
  
  /* 7. 表格单元格/表格标题 */
  display: table-cell;
  display: table-caption;
}

    注意：最常用且副作用最小的触发方式是 overflow: hidden 或 overflow: auto（优先选 auto，避免 hidden 截断内容）。

    三、BFC 的核心作用（附示例）

    BFC 的核心价值是解决布局冲突，以下是最常见的 3 个应用场景：

    1. 解决浮动导致的父元素高度塌陷

    问题：父元素内部的子元素设置float后，父元素会失去高度（因为浮动元素脱离普通文档流）。

    <!-- 问题代码：父元素.container高度为0 -->
<style>
  .container { border: 2px solid #000; }
  .box { width: 100px; height: 100px; float: left; background: #ccc; }
</style>
<div class="container">
  <div class="box"></div>
</div>

    解决方案：给父元素触发 BFC（比如设置overflow: hidden）：

    .container {
  border: 2px solid #000;
  overflow: hidden; /* 触发BFC，包含内部浮动元素 */
}

    效果：父元素高度会自动包含浮动的子元素，不再塌陷。

    2. 解决相邻块元素的 margin 重叠问题

    问题：两个相邻的块级元素，上下 margin 会 “折叠” 成其中较大的那个值（比如一个 margin:20px，一个 margin:30px，最终间距是 30px 而非 50px）。

    <!-- 问题代码：两个box的间距是30px，而非20+30=50px -->
<style>
  .box1 { margin-bottom: 20px; height: 50px; background: #ccc; }
  .box2 { margin-top: 30px; height: 50px; background: #eee; }
</style>
<div class="box1"></div>
<div class="box2"></div>

    解决方案：给其中一个元素包裹一个 BFC 容器，隔离 margin：

    <style>
  .bfc-container { overflow: hidden; /* 触发BFC */ }
  .box1 { margin-bottom: 20px; height: 50px; background: #ccc; }
  .box2 { margin-top: 30px; height: 50px; background: #eee; }
</style>
<div class="box1"></div>
<div class="bfc-container">
  <div class="box2"></div>
</div>

    效果：两个元素的 margin 不再重叠，间距变为 50px。

    3. 阻止元素被浮动元素覆盖

    问题：一个浮动元素会覆盖旁边的普通块元素，导致布局错乱。

    <!-- 问题代码：.content被浮动的.box覆盖 -->
<style>
  .box { width: 100px; height: 100px; float: left; background: #ccc; }
  .content { height: 150px; background: #eee; }
</style>
<div class="box"></div>
<div class="content">我是内容，被浮动元素覆盖了</div>

    解决方案：给被覆盖的元素触发 BFC：

    .content {
  height: 150px;
  background: #eee;
  overflow: hidden; /* 触发BFC，不与浮动元素重叠 */
}

    效果：.content 会自动避开浮动元素，不再被覆盖，布局恢复正常。

    总结
    • BFC 本质：一个独立的布局隔离区，内部元素布局与外部互不干扰；
    • 触发方式：优先用overflow: auto/hidden（副作用最小），也可通过 float、position、display:flex 等触发；
    • 核心作用：
      • 就算子元素浮动 , 父元素自身高度也不会高度塌陷；
      • 解决相邻块元素的 margin 重叠问题；
      • 阻止元素被浮动元素覆盖。

    5. CSS 中哪些属性可以继承？哪些不可以？

    • 答案：
      • 可继承属性（多与文本相关）：
        • 字体：font-size、font-family、font-weight。
        • 文本：color、text-align、line-height、letter-spacing。
        • 列表：list-style。
      • 不可继承属性（多与布局相关）：
        • 盒模型：width、height、margin、padding、border。
        • 定位：position、top、left、float。
        • 背景：background、background-color。

    6. 如何实现元素水平居中？

    • 答案：
      • 行内元素 / 文本：父元素设置 text-align: center。
      • 块级元素（定宽）：margin: 0 auto。
      • 块级元素（不定宽）：
        • 父元素用 flex：display: flex; justify-content: center。
        • 子元素用 transform：父元素 position: relative，子元素 position: absolute; left: 50%; transform: translateX(-50%)。

    7. 如何实现元素垂直居中？

    • 答案：
      • 单行文本：line-height 等于父元素高度。
      • 块级元素（已知高度）：
        • 父元素 position: relative，子元素 position: absolute; top: 50%; margin-top: -自身高度一半。
      • 块级元素（未知高度）：
        • 父元素 display: flex; align-items: center（推荐）。
        • 父元素 position: relative，子元素 position: absolute; top: 50%; transform: translateY(-50%)。
        • 父元素设置 display: table-cell; vertical-align: middle。

    8. 如何同时实现水平和垂直居中？

    • 答案：
      1. flex 布局（最简单）： 
        .parent {
  display: flex;
  justify-content: center; /* 水平 */
  align-items: center; /* 垂直 */
}
      2. 定位 + transform： 
        .parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
      3. grid 布局： 
        .parent {
  display: grid;
  place-items: center; /* 同时设置水平和垂直 */
}

    9. display 的常见值及作用？

    • 答案：
      • none：元素隐藏，不占空间（与 visibility: hidden 不同，后者占空间）。
      • block：块级元素，独占一行，可设置宽高（如 div、p）。
      • inline：行内元素，不独占一行，不可设置宽高（如 span、a）。
      • inline-block：行内块元素，不独占一行，可设置宽高（如 input、img）。
      • flex：启用弹性布局。
      • grid：启用网格布局。
      • table：元素作为表格显示。

    10. position 的取值及区别？

    • 答案：
      • static：默认值，正常文档流，不受 top/left 影响。
      • relative：相对定位，相对于自身原位置偏移，不脱离文档流，占原空间。
      • absolute：绝对定位，相对于最近的非 static 父元素偏移，脱离文档流，不占原空间。
      • fixed：固定定位，相对于浏览器窗口偏移，脱离文档流，不随滚动变化（如导航栏）。
      • sticky：粘性定位，滚动时在指定阈值前为 relative，之后为 fixed（如吸顶效果）。

    11. float 的特性及用途？为什么要清除浮动？

    • 答案：
      • 特性：元素脱离文档流，向左 / 右浮动，直到碰到父元素边缘或其他浮动元素。
      • 用途：早期用于图文环绕、多列布局（现在多被 flex/grid 替代）。
      • 需清除浮动的原因：浮动元素脱离文档流，导致父元素无法计算高度（高度塌陷），影响后续元素布局。

    12. flex 布局的核心属性有哪些？

    • 答案：
      • 父容器属性：
        • flex-direction：主轴方向（row/column 等）。
        • justify-content：主轴对齐方式（flex-start/center/space-between 等）。
        • align-items：交叉轴对齐方式（flex-start/center/stretch 等）。
        • flex-wrap：是否换行（nowrap/wrap）。
        • align-content：多轴对齐（仅换行时生效）。
      • 子元素属性：
        • flex-grow：剩余空间分配比例（默认 0，不分配）。
        • flex-shrink：空间不足时收缩比例（默认 1，可收缩）。
        • flex-basis：默认尺寸（默认 auto，即元素自身尺寸）。
        • flex：flex-grow、flex-shrink、flex-basis 的简写（如 flex: 1 即 1 1 0%）。
        • align-self：单独设置自身交叉轴对齐方式，覆盖 align-items。

    13. grid 布局和 flex 布局的区别？

    • 答案：
      • flex：一维布局（要么行要么列），适合线性排列的元素（如导航栏、列表）。
      • grid：二维布局（同时控制行和列），适合复杂网格结构（如仪表盘、不规则布局）。
      • 核心差异：flex 依赖主轴和交叉轴，grid 依赖行和列的轨道（grid-template-rows/grid-template-columns）。

    14. 什么是响应式布局？实现方式有哪些？

    • 答案：
      • 响应式布局：使页面在不同设备（手机、平板、PC）上自适应显示，保持良好体验。
      • 实现方式：
        1. 媒体查询（@media）：根据屏幕宽度设置不同样式，如 @media (max-width: 768px) { ... }。
        2. 弹性布局（flex）：子元素自动调整尺寸。
        3. 网格布局（grid）：二维自适应。
        4. 流式布局：使用百分比设置宽高，而非固定像素。
        5. 视口设置：<meta name="viewport" content="width=device-width, initial-scale=1.0">（关键，避免移动端缩放）。

    15. 媒体查询（@media）的语法及用途？

    • 答案：
      • 语法：@media [媒体类型] and (条件) { 样式 }
        • 媒体类型：screen（屏幕）、print（打印）等（可省略，默认 all）。
        • 条件：max-width（最大宽度）、min-width（最小宽度）、orientation: portrait（竖屏）等。
      • 用途：实现响应式布局，如： 
        /* 屏幕宽度 ≤ 768px 时应用 */
@media (max-width: 768px) {
  .container { width: 100%; }
}
/* 屏幕宽度 > 768px 且 ≤ 1200px 时应用 */
@media (min-width: 769px) and (max-width: 1200px) {
  .container { width: 90%; }
}

    16. CSS 动画有哪些实现方式？transition 和 animation 的区别？

    • 答案：
      • 实现方式：transition（过渡）、animation（动画）、transform（变换，常配合动画）。
      • 区别：
        特性 transition animation
        触发方式 需要事件触发（如 hover） 可自动触发（设置 animation-play-state）
        关键帧 仅支持开始和结束状态 支持多关键帧（@keyframes）
        循环 不支持循环（一次过渡） 支持 animation-iteration-count 循环
        复杂度 适合简单动画 适合复杂动画

    17. transform 的常用属性及作用？

    • 答案：transform 用于元素的变换（不影响布局），常用值：
      • translate(x, y)：平移（translateX/translateY 单独设置）。
      • scale(x, y)：缩放（scaleX/scaleY 单独设置，1 为原尺寸）。
      • rotate(deg)：旋转（正值顺时针，负值逆时针）。
      • skew(x-deg, y-deg)：倾斜。
      • matrix()：矩阵变换（整合以上所有变换）。
      • 示例：transform: translate(50px, 100px) rotate(30deg);

    18. z-index 的作用及使用条件？

    • 答案：
      • 作用：控制元素在 z 轴（垂直屏幕）的堆叠顺序，值越大越靠上。
      • 使用条件：元素必须设置 position 为 relative/absolute/fixed（static 无效）。
      • 注意：父元素 z-index 会限制子元素，子元素无法超出父元素的堆叠层级（即使子元素 z-index 更大）。

    19. 什么是 CSS Sprites（精灵图）？有什么优缺点？

    • 答案：
      • 精灵图：将多个小图标合并到一张图片，通过 background-position 显示指定部分。
      • 优点：减少 HTTP 请求次数，提高页面加载速度。
      • 缺点：维护成本高（修改图标需重新合并）；图标尺寸固定，缩放易失真。

    20. 如何实现文字溢出省略？

    • 答案：
      • 单行文本： 
        .text {
  white-space: nowrap; /* 不换行 */
  overflow: hidden;    /* 隐藏溢出 */
  text-overflow: ellipsis; /* 显示省略号 */
}
      • 多行文本（webkit 内核浏览器，如 Chrome/Safari）： 
        .text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示3行 */
  overflow: hidden;
}

    21. margin 重叠问题是什么？如何解决？

    • 答案：
      • 现象：两个相邻的块级元素（垂直方向）的 margin 会合并为一个，取较大值（如上方元素 margin-bottom: 20px，下方 margin-top: 30px，最终间距为 30px）。
      • 解决方法：
        • 给其中一个元素套父元素，并触发父元素 BFC（如 overflow: hidden）。
        • 将其中一个元素设为 inline-block。
        • 使用 padding 替代 margin（适用于父元素）。

    22. background 的简写属性及顺序？

    • 答案：background 是复合属性，顺序如下（可省略部分值）：background: [color] [image] [repeat] [attachment] [position];示例：background: #f00 url("img.jpg") no-repeat fixed center center;

    23. line-height 的取值方式及作用？

    • 答案：
      • 作用：设置行高，影响文本垂直间距，常用于垂直居中单行文本。
      • 取值：
        • 像素（line-height: 24px）：固定值。
        • 百分比（line-height: 150%）：基于父元素字体大小计算。
        • 无单位数字（line-height: 1.5）：基于自身字体大小计算（推荐，继承时更灵活）。

    24. 如何隐藏元素？有哪些方法及区别？

    • 答案：
      1. display: none：元素完全消失，不占空间，不响应事件。
      2. visibility: hidden：元素不可见，但占空间，不响应事件。
      3. opacity: 0：元素透明，占空间，可响应事件（如点击）。
      4. position: absolute; left: -9999px：元素移出可视区域，占空间（理论上），不影响布局。

    25. CSS 选择器有哪些？优先级如何计算？

    • 答案：
      • 选择器类型：
        • 基础：id（#id）、class（.class）、标签（div）、通配符（*）、属性（[type="text"]）。
        • 复合：后代（div p）、子代（div > p）、相邻兄弟（div + p）、通用兄弟（div ~ p）。
        • 伪类：:hover、:active、:nth-child(n) 等；伪元素：::before、::after。
      • 优先级计算（从高到低）：
        1. !important（最高，不推荐滥用）。
        2. 内联样式（style 属性，权重 1000）。
        3. id 选择器（权重 100）。
        4. 类 / 伪类 / 属性选择器（权重 10）。
        5. 标签 / 伪元素选择器（权重 1）。
        6. 通配符 / 继承样式（权重 0）。
      • 规则：权重相加比较，相同则后写的覆盖先写的。

    26. 什么是 CSS 盒模型？标准盒模型和 IE 盒模型的区别？

    • 答案：
      • 盒模型：CSS 中元素被视为一个盒子，包含 content（内容）、padding（内边距）、border（边框）、margin（外边距）。
      • 区别：
        • 标准盒模型（box-sizing: content-box）：总宽度 = content 宽度 + padding + border（默认值）。
        • IE 盒模型（box-sizing: border-box）：总宽度 = 设置的 width（包含 content + padding + border）。

    27. 怎么画 0.5 px 的线 ?

    1. 直接设置 0.5px（现代浏览器首选）

    在支持的浏览器（Chrome、Safari、iOS 等）中，可直接写：

    .line {
  border-bottom: 0.5px solid #e5e5e5;
}

    适用场景：仅需兼容现代浏览器，代码最简单。

    2. transform: scale() 缩放（兼容性最好）

    通过伪元素画 1px 的线，再缩放 0.5 倍，兼容性覆盖所有主流浏览器。

    .line {
  position: relative;
}
.line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e5e5e5;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

    适用场景：需要兼容低版本浏览器（如 Android 4.x、IE9+）。

    3. SVG 绘制（高精度场景）

    SVG 矢量图形可以精确绘制 0.5px 的线，适合对精度要求高的场景。

    <svg width="100%" height="1">
  <line x1="0" y1="0" x2="100%" y2="0" stroke="#e5e5e5" stroke-width="0.5" />
</svg>

    适用场景：需要跨设备保持一致精度的 UI 组件。

    方法 优点 缺点
    直接写 0.5px 代码极简 旧浏览器不支持
    transform: scale() 兼容性最好 需要伪元素，代码稍多
    SVG 精度最高 需引入 SVG 标签

    最后结语


    Github: https://github.com/Parker-Cui

    Gitee: https://gitee.com/cui_pe_ng_fei

    Juejin: https://juejin.cn/user/2276467567770442/posts

    okokok , 这期内容到这里就结束了,我们有缘再会 😂😂😂 !!!

    # 前端 # css
    Logo
    2048 AI社区

    有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

    更多推荐

    cover

    高校固定资产智能提醒系统：基于 Flutter × OpenHarmony 的资产状态管理实现

    avatar 2048 AI社区
    cover

    GEO 课程和 AI 内容生成课程有重叠吗？2026深度解析（附选择指南）

    avatar 2048 AI社区
    cover

    未来的开发考验的是写文档的能力

    avatar 2048 AI社区