应使用语义化的标签，但必须重置其默认样式（如margin:0;padding:0），并配合box-sizing:border-box及flex或text-align:center等布局方案确保对齐；避免直接用牺牲语义。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

底部版权信息用 footer 还是 div？ 语义上该用 footer，但浏览器默认会给它加 margin 或 display 行为，容易导致对齐“飘”——尤其在没清空父容器 padding/margin 时。实际项目里更稳妥的做法是统一用 div + 明确 class（比如 class="site-footer"），避免被 UA stylesheet 意外干扰。

如果坚持用 footer，务必在 CSS 开头加：

footer { margin: 0; padding: 0; }

否则可能和 body 或 main 的默认间距打架。

文字居中对齐但内容总偏左？检查父容器宽度和定位 常见原因是父容器没占满整行，或用了 float、inline-block 等让元素脱离文档流。确认以下几点：

• footer 或 .site-footer 的 width 是 100% 或 100vw（后者防滚动条缩窄）
• 没意外设置 max-width 且没居中它的父容器（比如 margin: 0 auto 用在了错误层级）
• 没用 position: absolute 却漏写 left: 0 / right: 0，导致只靠 text-align: center 不生效

text-align: center 失效的三个高频原因 这个声明只控制**行内内容**（文字、img、span）的水平对齐，对块级子元素无效。如果你的版权区包含多个 div 并列，它们不会被 text-align 居中。此时要改用：

• 给子 div 加 display: inline-block，再配合父级 text-align: center
• 直接上 display: flex; justify-content: center（推荐，兼容性到 IE11+）
• 用 grid：父级设 display: grid; place-items: center（适合单行内容）

别忘了给 footer 设 box-sizing: border-box，否则 padding 会撑宽导致换行或溢出。

固定底部（sticky footer）和普通底部的区别 如果页面内容很短，版权信息想“贴底”而不是“紧跟内容”，就得用 sticky 布局。纯靠 position: fixed; bottom: 0 最简单，但会遮挡内容、不随滚动移动。真正可靠的 sticky 方案依赖父容器高度控制：

• 给 html 和 body 设 height: 100%
• 主容器（如 main）用 min-height: 100vh，并设 padding-bottom 预留 footer 高度
• footer 自身设固定高度，并用 margin-top: -Xpx 抬升（负边距法）或用 flex 布局撑开

多数现代项目直接用 flex：

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
.site-footer { height: 40px; }

底部对齐看着简单，但实际卡点往往在父容器的高度继承、盒模型计算、以及 flex/grid 和传统布局混用时的隐式行为。动手前先用浏览器开发者工具选中 footer，看 computed 样式里 width、margin、display 到底是什么值——比猜快得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！