HTML图像位置由CSS定位机制控制，而非标签自身；默认为inline元素受文档流影响，需用display:block或vertical-align调整；绝对定位需配合已定位祖先元素，现代布局优先使用flex/grid。
HTML 中图像的位置不是由
标签自身决定的，而是由 CSS 定位机制控制的。新手别急着背
，先搞清“谁在控制谁”这个前提。
图像默认位置由文档流和 display 决定
默认是
元素，会像文字一样随行内内容排列，受父容器宽度、前后文本、
和
影响。常见现象：图片底下有空白、换行错位、对不齐文字。
用
让图片脱离行内流，消除底部空白
用
调整行内对齐（仅对
或
有效）
避免直接给
设
治标不治本——先确认它是不是真在你“以为”的流里
想精确放图？先学会父容器的定位上下文
的图不会相对于页面左上角，而是相对于**最近的已定位祖先元素**（即
值为
、
、
或
的父级）。新手常犯错：只给
加
，却不给父容器加
，结果图飞到 body 顶部左角。
想让图片相对某个卡片定位？给卡片容器加
父容器没设定位 → 浏览器回溯到
，变成“全页坐标系”
/
等偏移值，在无定位父级时才真正以视口为参考
flex 和 grid 已成主流布局方式，别绕开它们学定位
纯靠
摆图属于“硬编码”，难响应、难维护。现代页面中，图像位置更多由容器布局能力决定：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
用
+
/
居中一张图，比
+
更简洁可靠
用
划区域，把
放进指定
，位置由网格模板定义
注意：
容器里的
仍可设
实现居中——这是 flex 特性，不是定位属性
真正卡住新手的，往往不是“怎么写 position”，而是没意识到图像位置是父子协作的结果；一个
少写了，整个绝对定位就失效。先练熟文档流行为和父容器作用，再碰
和层叠上下文这类更隐蔽的问题。
position: absoluteinlineline-heightvertical-aligndisplay: blockvertical-align: top/middle/bottominlineinline-blockmargin-topposition: absolutepositionrelativeabsolutefixedstickyabsoluterelativeposition: relativetopleftpositiondisplay: flexjustify-contentalign-itemsabsolutetransformdisplay: gridgrid-areaflexmargin: autorelativez-index