默认不撑满父容器是因为它是行内元素（display: inline），只包裹内容宽度，不响应 width/height；解决方法是设 display: block 或 inline-block，并配合 width/height、box-sizing、flex: 1 或 grid 区域覆盖等。
为什么 <a></a> 默认不撑满父容器
因为 <a></a> 是行内元素（display: inline），它只包裹内容宽度，不会响应父级的 width 或 height，即使父容器设了 padding 或 flex 布局，点击热区也仅限文字本身。
用 display: block 或 inline-block 撑开链接
最直接有效的方式是改写链接的显示模式：
-
display: block：适合父容器是块级、需要独占一行的场景，能完全继承父宽高（含 padding） -
display: inline-block：适合需要保持行内流式布局（比如多个链接并排），同时又想撑高撑宽 - 必须显式设置
width: 100%和/或height: 100%，否则在某些父容器（如flex项）中仍可能不生效 - 若父容器有
padding，链接需加box-sizing: border-box才能真正填满可视区域
<div class="card">
<a href="/post/1" style="display: block; width: 100%; height: 100%; box-sizing: border-box;">
<h3>标题</h3>
<p>摘要</p>
</a>
</div>
在 Flex/Grid 容器里要注意 align-items 和 justify-content
如果父容器是 display: flex 或 grid，仅设 display: block 不够——子项默认不拉伸。这时要配合对齐属性：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 父容器加
align-items: stretch（flex 默认值，但可能被覆盖） - 父容器加
justify-content: stretch（仅 flex 主轴方向，通常不需要） - 更稳妥的是给
<a></a>加flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），强制它填满剩余空间 - Grid 中可直接设
<a></a>为grid-row: 1 / -1; grid-column: 1 / -1覆盖整个网格区域
移动端点击区域太小？别只靠 font-size 放大
iOS Safari 和部分安卓浏览器对可点击区域有最小尺寸要求（约 44×44px），光放大文字没用。正确做法：
- 给
<a></a>设min-height: 44px+min-width: 44px - 用
padding扩展热区，比height更安全（避免内容被截断） - 确保父容器没有
overflow: hidden，否则 padding 区域可能被裁剪 - 测试时真机点击，模拟器的 hover 行为会掩盖真实触控问题
复杂点在于：当链接内嵌图片、图标、多行文本时，height: 100% 可能失效（因父高度未定义或受内容影响），这时候得回退到 padding + min-height 组合，而不是硬撑高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
