盒模型与定位可协同工作：盒模型控尺寸留白，定位控位置；绝对/相对定位以border box左上角为基准，受content/padding/border共同影响；width/height默认仅作用于content区，需box-sizing:border-box避免溢出；居中应配合transform或flex布局。
盒模型和定位本身不冲突，冲突往往来自对两者尺寸计算逻辑和定位基准的理解偏差。关键不是“避免冲突”，而是让它们协同工作——用盒模型控制尺寸与留白，用定位决定位置关系。
定位起点受盒模型影响
使用 position: absolute 或 relative 时，元素的 top/left 偏移量，始终以它的边界框（border box）左上角为起点计算。这个起点位置，直接受 content、padding、border 共同决定：
- 若未设
box-sizing: border-box，而写了width: 200px; padding: 20px;，实际占用宽度是 240px，可能撑破容器或导致定位错位 - 设置了
padding-top: 30px的 relative 容器，其子元素top: 0会从 padding 区顶部开始算，而非 content 顶边 - border 有厚度时（如
border: 3px solid #000），绝对定位的left: 0是贴着 border 左边缘，不是内容区左边缘
宽高定义方式决定布局稳定性
CSS 中 width 和 height 默认只作用于 content 区域。这是多数“尺寸溢出”“居中偏移”的根源：
-
width: 100%; padding: 16px;→ 实际宽度 = 父容器宽 + 32px（左右 padding），必然横向滚动 - 修复方法：统一加
box-sizing: border-box;，让 width/height 包含 padding 和 border - 对所有元素生效可写：
* { box-sizing: border-box; }（现代项目推荐）
定位元素的外边距行为特殊
absolute/fixed 元素的 margin 不会与兄弟元素发生外边距合并（collapse），但仍有细节要注意：
立即学习“前端免费学习笔记（深入）”；
- margin 仍参与自身尺寸计算：比如
width: 200px; margin: 20px;，整体占位宽 = 200px + 40px - 负 margin 可用于微调位置（如向左拉回半个边框），但要配合 transform 或明确尺寸才可控
- fixed 定位的导航栏若设了
margin-top: 10px，不会把 body 内容往下推——它已脱离文档流，需靠padding-top在 body 上预留空间
居中类场景必须补偿偏移
用 top: 50%; left: 50% 实现居中时，浏览器按元素 border box 的左上角定位，而非中心点：
- 直接写会导致模态框右下偏移，因为没考虑自身宽高
- 标准解法：
transform: translate(-50%, -50%)把元素向左上拉回自身一半尺寸 - 更优替代：父容器用
display: flex; justify-content: center; align-items: center;，完全绕过 offset 计算
