必须用 pre 包裹 code 并对 pre（或设为 block 的 code）加边框，因 code 是行内元素，无法可靠包裹多行代码；标准结构为 ...。
code 标签本身不能直接加边框——它只是语义化标记，不是容器，也不自带块级布局能力。真要给代码块加边框，必须配合 pre 使用，并对 pre（或其子 code）应用 CSS 边框样式。
为什么单用 code 加 border 无效或错位
因为 code 是行内元素，浏览器不会为它生成独立的盒模型上下文；即使强行加 border: 1px solid #ccc，边框会紧贴文字边缘、无法包裹换行内容，且多行时边框断裂、缩进丢失。更常见的是：边框只包住第一行，后续行“破框而出”。
- 错误写法：
<code style="border: 1px solid #999">function foo() {\n return true;\n}→ 渲染后所有换行被压缩，边框只围住一行平铺文本 -
code不响应width、padding（除非设display: inline-block），但那样仍无法可靠控制多行布局 - 想靠
code自身实现“带边框的代码块”，本质是误用语义
正确做法：用 pre 包裹 code，再给 pre 加边框
标准结构是 <pre class="brush:php;toolbar:false;"><code>...</code></pre>。pre 提供块级容器和格式保留能力，code 声明语义——边框必须加在 pre 上（或加在 code 上但同步设 display: block）。
- 推荐写法：
<pre class="brush:php;toolbar:false;" style="border: 1px solid #ddd; border-radius: 4px; padding: 12px; overflow-x: auto;"><code class="js">console.log('hello');</code></pre> - 若边框加在
code上，必须加display: block，否则边框不包围整块内容：<pre class="brush:php;toolbar:false;"><code style="display: block; border: 1px solid #aaa;">...</code></pre> - 别给
pre设display: inline或浮动，否则破坏代码块完整性
边框样式细节与易踩坑点
边框本身用 CSS border 控制，但有三个关键约束条件必须同时满足，否则视觉或可访问性出问题：
-
pre必须设overflow-x: auto：长代码行才不会撑破容器或丢失内容 -
code必须设display: block（如果边框加在它身上）：否则行内特性导致边框塌陷 - 颜色不能省略：
border: 1px solid无效——浏览器可能回退到文字色，但不可靠；务必写全border: 1px solid #666 - 圆角需配
border-radius，但注意：IE8 及更早版本不支持，如需兼容得降级处理
真正容易被忽略的是语义混淆：有人把 pre 当成“纯样式标签”乱用，结果屏幕阅读器读作“预格式化文本”，而非“JavaScript 代码”。只要嵌套了 code 并加了 class="js" 这类语言标识，高亮库和辅助技术才能正确识别——边框只是表层，语义结构才是根基。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
