元素的意外外边距
" />
HTML 默认会给 添加 8px 外边距，导致页面四周出现空白；只需重置所有元素的 margin 和 padding 为 0，并配合 box-sizing: border-box，即可消除该问题。
html 默认会给 `
` 添加 8px 外边距，导致页面四周出现空白；只需重置所有元素的 `margin` 和 `padding` 为 0，并配合 `box-sizing: border-box`，即可消除该问题。在初学 HTML/CSS 时，常会遇到一个看似“神秘”的现象：即使只写了一个空 <div> 放入 <code>，页面边缘仍会出现一圈白色间隙。这不是 <div> 自身的问题，而是浏览器对某些基础元素（尤其是 <code> 和 ）应用了默认样式所致。
现代浏览器（如 Chrome、Firefox、Safari）默认为 设置了 margin: 8px，部分浏览器还会为 或 <h1></h1> 等标题元素添加额外边距。因此，所谓“意外外边距”实为浏览器用户代理样式表（User Agent Stylesheet）的默认行为。
✅ 正确解决方案是执行 CSS 重置（Reset）：在样式表开头统一清除所有元素的默认外边距与内边距：
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 确保 width/height 包含 padding 和 border */
}⚠️ 注意事项：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
*通配符虽简洁，但在大型项目中可能影响性能（可改用更精准的重置，如仅重置html, body, div, p, h1, ...）； -
box-sizing: border-box应与margin/padding: 0配合使用，避免后续布局因盒模型理解偏差而错乱； - 若使用
float: left布局（如本例中的.box），务必通过.clearfix或overflow: hidden清除浮动，否则父容器高度塌陷——你已正确实现了伪元素清除法，值得肯定。
完整可运行示例（styles.css）：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
float: left;
width: 50%;
}
#box1 { background-color: grey; }
#box2 { background-color: lightblue; }
.clearfix::after {
content: "";
display: table;
clear: both;
}? 进阶建议：
对于新项目，推荐使用标准化 CSS 重置方案（如 Normalize.css）或现代布局方式（Flexbox / Grid）替代 float，既语义清晰又免去清除浮动的繁琐步骤。例如，用 Flex 实现两栏并排仅需三行代码：
.clearfix {
display: flex;
}
.box { flex: 1; } /* 自动均分宽度 */掌握默认样式的来源与重置逻辑，是迈向可控、可预测 CSS 布局的关键第一步。
