是，img 遵循盒模型基本结构，width/height 作用于 content box 且 box-sizing 无效；margin 生效但易被基线对齐掩盖；padding/border 正常渲染不裁剪图片；max-width: 100% 配合 height: auto 实现安全响应式。
img 元素是否遵循标准盒模型
是，img 是替换元素（replaced element），它**遵循盒模型的基本结构**（content → padding → border → margin），但关键区别在于：它的 width 和 height 默认作用于 **content box**，且无法通过 box-sizing 改变行为（box-sizing: border-box 对 img 无效）。浏览器会先根据固有尺寸、HTML 属性或 CSS 尺寸确定 content 区域，再叠加 padding/border/margin。
设置 width/height 后 margin 是否生效
生效，但容易被误判。常见错觉是 “margin 没起作用”，实际多因父容器未清除浮动、行内格式化上下文（IFC）中默认的基线对齐（baseline alignment）导致视觉偏移。
-
img默认为display: inline，会与文字基线对齐，下方留出约 4px 空隙（来自行高剩余空间），此时margin-bottom看似“没用”，实则是被基线对齐掩盖 - 解决方法：设
display: block或vertical-align: top/middle/bottom - 若父容器是 flex/grid 容器，则自动脱离 IFC，
margin表现符合直觉
padding 和 border 对图片显示的影响
padding 和 border 会正常渲染，但不会拉伸或裁剪图片内容本身——它们只是包裹在图片 content box 外围的装饰层。图片始终填满 content 区域（除非显式设 object-fit）。
img {
width: 200px;
height: 150px;
padding: 10px;
border: 3px solid #333;
background: #eee; /* 可见 padding 区域 */
}此时整个元素总宽度 = 200 + 2×10 + 2×3 = 226px；但图片像素仍严格铺满 200×150 的 content 区域。
立即学习“前端免费学习笔记（深入）”；
为什么 max-width: 100% 常用于响应式图片
因为 img 的固有宽高优先级高于 max-width，而 max-width 是唯一能「安全约束」其 content box 不溢出父容器的 CSS 属性（width: 100% 在无明确父宽时可能失效，max-width 则只在内容超限时介入）。
- 搭配
height: auto可保持原始宽高比 - 不加
height: auto会导致图片被垂直压缩（因height默认为auto，但受max-width触发后计算逻辑变化） - 注意：若同时设了
width和max-width，以width为准；只有当width超过max-width时，后者才生效
真正容易被忽略的是：当 img 处于内联流中又未处理 vertical-align 时，哪怕写全了 margin，视觉上也像“没动”。这不是盒模型失效，而是格式化上下文规则在起作用。
