前端老铁必看：position-relative搞定文字图片重合，从此告别布局翻

前端老铁必看：position-relative搞定文字图片重合，从此告别布局翻车现场

开篇先吐槽：明明没动它，怎么就叠一起了？

兄弟们，今天咱们聊一个前端界的"灵异事件"——文字和图片莫名其妙就叠在一起了。

你有没有遇到过这种让人血压飙升的瞬间？明明只是想微调一下那个小小的图标位置，结果一刷新页面，好家伙，文字直接"骑"在了图片头上，像是图片长了个文字脑袋。更离谱的是，你检查了半天代码，发现自己根本没写任何跟定位相关的东西，它就这么水灵灵地重合了。

我记得有次给电商详情页做优化，产品经理就说了句"那个价格标签往左挪5像素"，我寻思这简单啊，随手写了个margin-left: 5px，结果整个价格区域直接飞到了商品图正中央，把模特的脸挡得严严实实。当时我的表情大概是这个样子的：😳 → 🤔 → 😤 → 🙃

说实话，早些年我被position: absolute支配的恐惧至今难忘。那家伙就像个不负责任的渣男，说跑就跑，完全不管后面元素的感受，留下一地空白让父元素收拾烂摊子。后来听说relative是个"老实人"，相对自己原来的位置挪挪窝，不会影响别人，我心想这下稳了。

结果呢？现实给了我响亮的一巴掌。有时候设了relative还是压不住，有时候根本移不动，有时候明明偏移了却看不见效果…这"老实人"怎么也会背锅啊？

所以今天咱们就掰开了揉碎了，好好聊聊position: relative这货到底该怎么用，特别是当你遇到文字和图片"打架"的时候，怎么劝架才能既体面又高效。

---

扒一扒relative这货到底是个啥性格

先别急着翻MDN文档，那些官方定义看了跟没看一样。我用大白话给你翻译一下：relative其实就是**“相对自己原来的位置挪窝”**。

啥意思呢？想象一下你排队买奶茶，本来站在第5个位置。这时候absolute的做法是：直接离开队伍，跑到店门口蹲着去了，后面的人自动往前补位，仿佛你从来没存在过。而relative的做法是：你人往前走了两步（比如去前面看看菜单），但你的"坑"还占在第5位，后面的人得等你回来才能往前走——人走了，坑还在。

这就是最核心的区别。relative不会脱离文档流，它原来的位置就像被打了标记，就算你用top、left把它移到天涯海角（夸张了，其实移不了多远），那个占位符依然坚挺地存在着。

/* 举个栗子 */
.normal-box {
    width: 100px;
    height: 100px;
    background: #ff6b6b;
}

.relative-box {
    position: relative;
    top: 20px;  /* 往下挪20px */
    left: 20px; /* 往右挪20px */
    width: 100px;
    height: 100px;
    background: #4ecdc4;
}

<div class="normal-box">我是正常盒子</div>
<div class="relative-box">我是relative盒子</div>
<div class="normal-box">我又是正常盒子</div>

你跑一下这段代码就会发现，那个青色的relative盒子确实往下往右跑了，但它原来的位置还空着一块，下面的红色盒子并不会顶上去填补空缺。这就是"占位符"特性。

再说说它和z-index的爱恨情仇。很多人（包括当年的我）以为只要给元素加了relative，就能随便调层级了。结果发现z-index: 9999都写了，还是被别的元素压在下面，气得想砸键盘。

真相是：relative确实能创建新的层叠上下文，但这里面的水很深。如果你的父元素已经设置了z-index，或者父元素也是relative/absolute/fixed/sticky，那子元素的z-index是在父元素的层叠上下文里竞争的，不是全局的。这就好比你以为自己是公司CEO能管所有人，结果发现只是部门经理，只能管自己部门这几个人。

/* 层级调了个寂寞的典型场景 */
.parent {
    position: relative;
    z-index: 1;  /* 父级只有1，子级再高也没用 */
}

.child {
    position: relative;
    z-index: 100;  /* 你以为很高，其实被父级限制了 */
}

/* 另一个部门的经理 */
.other-parent {
    position: relative;
    z-index: 2;  /* 比上面的parent高，所以它的子元素天然在上面 */
}

所以下次调z-index没反应的时候，先往上翻翻父元素，看看是不是被"天花板"限制住了。

---

实战演练：文字和图片"打架"怎么劝架

好了，理论聊完，咱们上硬菜。下面这三个场景，都是我实战中踩过坑的真事儿。

场景一：图片右下角加个"热销"标签，别再用margin硬怼了

做电商的兄弟对这个需求肯定不陌生。商品图右上角要个"NEW"或者"HOT"标签，看起来简单，做起来坑多。

新手常见做法：

/* 错误示范，别学 */
.tag {
    margin-top: -200px;
    margin-left: 150px;
    /* 用margin硬怼，父级高度直接塌陷，下面元素全乱了 */
}

这种写法的问题在于，负margin会让父元素以为这个标签不存在，高度计算直接忽略它，下面的"加入购物车"按钮可能就顶上来了，和商品图重叠。

正确姿势应该是relative配合百分比或者具体像素值：

<div class="product-card">
    <div class="image-wrapper">
        <img src="product.jpg" alt="商品图">
        <span class="hot-tag">热销</span>
    </div>
    <h3 class="title">2024新款爆款T恤</h3>
    <p class="price">¥99.00</p>
</div>

.product-card {
    width: 300px;
    border: 1px solid #eee;
    padding: 10px;
}

.image-wrapper {
    position: relative;  /* 关键：给父级建立定位上下文 */
    width: 100%;
    height: 300px;
    overflow: hidden;    /* 防止图片变形 */
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hot-tag {
    position: relative;  /* 相对自己原来的位置移动 */
    /* 原来的位置是在图片下方，因为span是行内元素，跟在img后面 */
    top: -280px;        /* 往上挪到图片区域 */
    left: 220px;        /* 往右挪到右下角 */
    
    /* 样式美化 */
    display: inline-block;  /* 必须转块级或行内块，不然top/left可能失效 */
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(238, 90, 111, 0.3);
    
    /* 防止被图片盖住 */
    z-index: 2;
}

等等，你可能会问：为啥不给.hot-tag用absolute，直接right: 10px; top: 10px不香吗？

香，确实香。但这里我想演示的是relative的用法。而且有时候（比如后台富文本编辑器生成的内容），你没法给父级加position: relative，这时候就只能用relative来微调了。

不过说实话，这种场景我还是更推荐absolute。但既然主题是relative，咱们就硬用relative实现，顺便看看偏移量怎么算：

图片高度300px，标签本身高度大概30px（padding+font-size），想要距离底部20px，那top值就是-(300 - 30 - 20) = -250px。但我上面写的是-280px，因为还要考虑标签原本的行高和间距。这就是relative的麻烦之处——你得做数学题。

场景二：文字太长溢出盖住了旁边的缩略图

这个场景在后台管理系统里特别常见。左边是商品缩略图，右边是商品名称，名称太长的时候会把图片挤变形，或者文字直接盖住图片。

<div class="list-item">
    <img src="thumb.jpg" class="thumb" alt="缩略图">
    <div class="content">
        <h4 class="title">这是一个超长的商品标题，可能会换行很多次甚至溢出容器</h4>
        <p class="desc">商品描述...</p>
    </div>
</div>

.list-item {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    /* 这里不给relative，用默认的static */
}

.content {
    flex: 1;
    margin-left: 12px;
    /* 关键：给content加relative，方便内部元素微调 */
    position: relative;
}

.title {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    /* 限制行数，防止无限增高 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    
    /* 骚操作：用relative微调位置 */
    position: relative;
    top: -2px;  /* 往上提2像素，和缩略图顶部对齐更精准 */
    margin: 0 0 8px 0;
}

.desc {
    font-size: 12px;
    color: #999;
    margin: 0;
    
    /* 再来个骚操作 */
    position: relative;
    left: 0;  /* 看似没动，其实创建了层叠上下文，防止被其他元素影响 */
}

这里有两个relative的妙用：

1. .content的relative：建立了定位上下文，如果后面需要在右侧加"编辑"、"删除"按钮，可以直接absolute定位到右上角，不用担心乱跑。

2. .title的relative微调：Flex布局虽然方便，但有时候对齐就是差那么1-2像素，肉眼看着不舒服。这时候用relative微调一下top值，比改margin或padding更精准，而且不会影响其他元素的位置。

还有个小技巧：如果你发现文字和图片之间总是有莫名的间隙，可能是行内元素的基线对齐问题。给图片加display: block或者vertical-align: top能解决，但有时候你就是想保留行内特性，这时候给文字加position: relative; top: -3px之类的微调，也是一种"野路子"。

场景三：多层嵌套的"父子局"配合打法

这个场景比较复杂，但也是relative真正发威的时候。假设你要做一个带遮罩层的图片展示，图片上有标题，鼠标悬停时显示操作按钮。

<div class="gallery">
    <div class="item">
        <div class="image-box">
            <img src="photo.jpg" alt="作品">
            <!-- 遮罩层 -->
            <div class="overlay">
                <h3 class="overlay-title">夏日海滩</h3>
                <div class="actions">
                    <button class="btn-like">❤️</button>
                    <button class="btn-share">🔗</button>
                </div>
            </div>
        </div>
        <p class="author">摄影师：张三</p>
    </div>
</div>

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.image-box {
    position: relative;  /* 父级：建立定位上下文 */
    width: 100%;
    aspect-ratio: 4/3;  /* 保持宽高比 */
    overflow: hidden;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* 鼠标悬停时图片放大 */
.image-box:hover img {
    transform: scale(1.05);
}

.overlay {
    position: absolute;  /* 子级：绝对定位铺满父级 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    
    /* 内部用flex居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-box:hover .overlay {
    opacity: 1;
}

.overlay-title {
    /* 这里用relative做微调 */
    position: relative;
    top: 10px;  /* 初始位置偏下 */
    color: white;
    font-size: 18px;
    margin: 0 0 16px 0;
    opacity: 0;
    transition: all 0.3s ease 0.1s;  /* 延迟出现 */
}

.image-box:hover .overlay-title {
    top: 0;  /* 复位 */
    opacity: 1;
}

.actions {
    position: relative;  /* 建立层叠上下文 */
    top: 10px;          /* 同样初始偏下 */
    opacity: 0;
    transition: all 0.3s ease 0.2s;  /* 更晚出现 */
    
    display: flex;
    gap: 12px;
}

.image-box:hover .actions {
    top: 0;
    opacity: 1;
}

.btn-like, .btn-share {
    /* 按钮也用relative，做点击效果 */
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-like:hover, .btn-share:hover {
    transform: scale(1.1);
}

/* 点击时的下沉效果 */
.btn-like:active, .btn-share:active {
    position: relative;
    top: 2px;  /* 点击时往下沉2px，有按下去的感觉 */
}

.author {
    padding: 12px;
    margin: 0;
    font-size: 14px;
    color: #666;
    
    /* 文字对齐微调 */
    position: relative;
    top: 1px;  /* 让文字在垂直方向看起来更居中 */
}

这个例子展示了relative的几个妙用：

1. 父级relative + 子级absolute：这是最经典的配合。.image-box设置relative，.overlay设置absolute: 0，这样遮罩层就能完美铺满图片区域。

2. 动画初始状态偏移：.overlay-title和.actions都用relative设置了top: 10px，配合opacity: 0，实现从下方浮入的动画效果。如果用transform: translateY性能会更好，但relative的top属性更直观易懂。

3. 点击反馈：按钮的:active状态用relative的top: 2px实现下沉效果，比用transform更简单，而且兼容性更好（虽然现代浏览器都支持transform了）。

4. 像素级微调：.author的top: 1px就是纯粹的对齐强迫症，让文字在视觉垂直中心。

关于偏移量的计算，这里分享一个我的心得：别死磕公式，用开发者工具实时拖拽。Chrome DevTools里选中元素，右边样式面板找到top、left属性，用方向键上下调整，看效果满意了再把数值抄回代码里。比你在那算来算去快多了，毕竟每个项目的盒模型可能都不一样（border-box vs content-box）。

---

避坑指南：那些让你怀疑人生的诡异重合

用了这么多年relative，我总结了一些"灵异事件"的排查方法。

设置了relative却纹丝不动？

先检查这几点：

/* 情况1：没给宽度或高度，元素本身就是0x0 */
.ghost {
    position: relative;
    top: 100px;  /* 移了，但你看不见，因为元素没内容也没宽高 */
}

/* 情况2：行内元素直接设relative，top/left可能不生效 */
span.inline-ghost {
    position: relative;
    top: 20px;  /* 可能没反应 */
    /* 解决：加display: inline-block或block */
}

/* 情况3：被父级的overflow:hidden截胡了 */
.parent {
    overflow: hidden;
    height: 100px;
}

.child {
    position: relative;
    top: 150px;  /* 移出去了，但被父级裁剪了 */
}

特别是第三种情况，很多人（又包括我）踩过坑。你以为元素没动，其实它已经移到父元素外面去了，只是被overflow: hidden给"咔嚓"掉了。解决方法是要么去掉overflow（不太可能），要么换个方向偏移，或者给父级加padding留出空间。

图片重合后点击事件失效

这种情况多半是层级问题。假设你有这样一个结构：

<div class="card">
    <img src="bg.jpg" class="bg">
    <div class="content">文字内容</div>
    <button class="btn">点击我</button>
</div>

.bg {
    position: relative;
    z-index: 1;
}

.content {
    position: relative;
    z-index: 2;
    margin-top: -100px;  /* 往上移，盖住图片一部分 */
}

.btn {
    position: relative;
    z-index: 3;
    /* 结果发现点不动！ */
}

看起来z-index都设置好了，按钮应该是3，最高，为什么点不动？

因为z-index只在同一个层叠上下文内比较。如果.card没有建立层叠上下文，那么这三个z-index都是独立的，可能受其他元素影响。正确的做法是给.card加position: relative; z-index: 0（或auto以外的值），创建一个统一的层叠上下文。

.card {
    position: relative;
    z-index: 0;  /* 建立层叠上下文 */
}

还有一种可能是透明遮罩层。有时候你会忘了自己写了个全透明的div盖在上面，或者伪元素::before/::after占了位置。用开发者工具检查一下元素层级，看看鼠标点击的时候到底命中了哪个元素。

移动端适配的噩梦

PC端看着好好的，一到手机上文字直接飞出屏幕，这种情况我遇到过无数次。

/* PC端写的 */
.tag {
    position: relative;
    left: 350px;  /* 在300px宽的手机上，直接飞出屏幕 */
}

/* 移动端应该这样 */
.tag {
    position: relative;
    left: 85%;   /* 用百分比，相对父级宽度 */
    /* 或者用calc */
    left: calc(100% - 50px);  /* 距离右边50px */
}

relative的偏移量支持百分比，是相对于**包含块（containing block）**的宽度（left/right）或高度（top/bottom）计算的。在响应式布局里，尽量用百分比或者calc()，别写死像素值。

还有一个坑是Retina屏的1像素问题。有时候你在iPhone上看，relative偏移1px看起来像是偏移了2px，因为设备像素比（DPR）是2。这时候用transform: translateX(0.5px)反而更精准，但relative做不到这么细。

调试大招：用开发者工具"拖拽"

最后分享我的调试秘诀。遇到布局问题，别急着改代码刷新，用Chrome DevTools的这几个功能：

1. Computed面板：看最终计算出来的top、left值，确认你的CSS有没有被覆盖。

2. 元素拖拽：选中元素，按键盘H键隐藏，看是不是这个元素在捣乱。

3. 强制状态：在Elements面板右键元素，选"Force state" -> “:hover”，看hover状态下的样式。

4. 层叠上下文可视化：在Layers面板（更多工具 -> Layers）可以看到页面的层叠情况，哪个在上面一目了然。

5. 实时编辑数值：在Styles面板找到top属性，点一下数值，然后按键盘上下键，看着页面实时变化，找到最佳位置。

---

老鸟私藏：让布局更丝滑的几个野路子

结合transform: translate()使用

前面一直在说top和left，但老实讲，现代前端更推荐用transform: translate()来做位移。为啥？因为top/left会触发重排（reflow），而transform只会触发重绘（repaint），性能差了一个数量级。

但有时候你就是想用relative，比如为了建立层叠上下文。这时候可以两个一起用：

.smooth-move {
    position: relative;
    /* 用transform做动画，性能更好 */
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.smooth-move:hover {
    transform: translateY(0);
}

或者这种写法，relative负责"占位"，transform负责"移动"：

.card {
    position: relative;
    /* 其他样式 */
}

.card:hover {
    transform: translateY(-5px);  /* 往上浮起 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

这样既保留了文档流中的位置，又有流畅的动画效果。

什么时候该用relative，什么时候上flex或grid

这是很多新手的困惑。我的建议是：

• 一维排列（单行或单列）：用Flexbox，别折腾relative了。
• 二维布局（网格状）：用Grid，relative在这种场景下就是弟弟。
• 微调位置（几个像素的偏移）：用relative，或者margin。
• 元素重叠（比如文字压在图片上）：用absolute（父级relative），relative在这种场景下很别扭。
• Sticky效果：用position: sticky，别用relative + JS模拟，性能差还麻烦。

relative最适合的场景其实是：作为absolute的锚点，或者做微小的位置修正。别试图用它做整个页面的布局，那是给自己找罪受。

代码洁癖：用CSS变量管住魔法数字

前面示例里写了很多具体的像素值，比如top: 20px、left: 220px。在实际项目中，这些"魔法数字"应该提取成CSS变量：

:root {
    --tag-offset-x: 220px;
    --tag-offset-y: -280px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
}

.hot-tag {
    position: relative;
    top: var(--tag-offset-y);
    left: var(--tag-offset-x);
    padding: var(--spacing-xs) var(--spacing-sm);
}

这样后期调整的时候，改一个地方就行，不用满世界找220px这个数值。而且变量名有语义，过两个月再看代码也能明白当初为啥这么设。

吐槽一下全局乱加relative的同事

最后必须吐槽一下，有些老项目里，你会看到这种代码：

* {
    position: relative;  /* 哪个天才写的？ */
}

或者每个div都带个position: relative，生怕用不上似的。

这种做法的危害在于：

1. 性能损耗：每个元素都创建层叠上下文，浏览器渲染负担加重。
2. z-index混乱：全局都是层叠上下文，z-index管理变成噩梦。
3. 维护困难：后来者根本不知道哪些relative是必要的，哪些可以删。

记住，relative不是默认属性，按需添加。就像你不会给每个元素都加border一样，也别滥用relative。

---

最后唠两句：别把简单问题复杂化

写到这突然想起来，其实大部分重合问题都是我们想太多。有时候遇到文字和图片贴在一起，第一反应是"上relative"、“调z-index”，其实可能只需要：

img {
    display: block;  /* 解决图片底部间隙问题 */
}

或者：

.text {
    margin-top: 10px;  /* 简单直接，不折腾 */
}

relative虽好，可不要贪杯。我见过太多嵌套了七八层relative的代码，每个都偏移一点点，最后自己都算不清元素到底在哪了。调试的时候在开发者工具里看到一堆偏移量，跟解谜游戏似的。

所以下次再遇到元素重叠，先深呼吸，别急着删库跑路。按这个顺序排查：

1. 是不是盒模型问题？（margin、padding、border）
2. 是不是行内元素基线对齐问题？（vertical-align）
3. 是不是Flex/Grid对齐问题？（align-items、justify-content）
4. 最后才考虑relative/absolute这些定位方案。

毕竟，最好的代码是没写的代码，能用简单方案解决的，就别整那些花里胡哨的。

好了，今天关于position: relative的吐槽大会就到这。希望下次你遇到文字和图片"打架"的时候，能想起今天聊的这些招数，优雅地劝好它们，而不是像当年的我一样，对着屏幕骂娘。

散会！

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

---

专栏系列（点击解锁）	学习路线(点击解锁）	知识定位
《微信小程序相关博客》	持续更新中~	结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》	持续更新中~	AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》	《前端基础入门三大核心之html相关博客》	前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
	《前端基础入门三大核心之JS相关博客》	前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
	《前端基础入门三大核心之CSS相关博客》	介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
	《canvas绘图相关博客》	Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》	持续更新中~	详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》	持续更新中~	Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》	持续更新中~	SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》	持续更新中~	算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》	持续更新中~	作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
	《信息化人员基础技能知识相关博客》	无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
	《信息化技能面试宝典相关博客》	涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》	持续更新中~	罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》	持续更新中~	基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》	持续更新中~	分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！