子元素紧贴父元素左上角需清除默认margin/padding、确保父容器无padding、子元素无默认外边距，并确认未意外触发BFC或浮动；若需精确贴边，父设position: relative后子用position: absolute配合top: 0;left: 0。
子元素紧贴父元素左上角（默认行为但常被干扰）
HTML 元素默认不“紧贴”父元素边缘，是因为浏览器有默认 margin 和 padding（比如 <p>、<h1>），或父容器设置了 padding。所谓“紧贴”，其实是把干扰项清掉。
- 重置父容器的
padding：如果父元素是<div class="box">，加.box { padding: 0; } - 重置子元素的外边距：对常见块级标签如
<p>、<h2>，显式设margin: 0; - 检查是否意外触发了 BFC 或浮动，导致布局偏移；
display: block;子元素在无样式时本就从左上角开始流式排列，无需额外定位
用 absolute 精确钉住任意边缘（含右/下）
当需要子元素严格贴住父元素的右边缘、底边缘或右下角时，position: absolute 是最直接可控的方式，但前提是父元素已设 position: relative（或 absolute/fixed）作为定位上下文。
- 贴右上角：
right: 0; top: 0; - 贴左下角：
left: 0; bottom: 0; - 贴右下角且带 8px 间距：
right: 8px; bottom: 8px; - 避免漏写
position: relative在父元素上——否则absolute会向上找最近的定位祖先，甚至跑到<body>上
flex 布局中让子元素贴边（非居中场景）
如果父容器是 display: flex，又不想用 absolute，可以通过 justify-content 和 align-items 快速实现贴边，但要注意：它只控制主轴和交叉轴的对齐，不改变子元素自身尺寸或内边距。
- 子元素贴左（主轴起点）：
justify-content: flex-start;（默认值，通常不用写） - 贴右：
justify-content: flex-end;，此时所有子元素整体靠右，不是单个子元素“贴右” - 要让某一个子元素单独贴右，其他居左？得用
margin-left: auto;—— 它会把左侧剩余空间全挤给这个margin，从而把该元素“推”到最右 - 注意：若子元素设了
flex: 1或width: 100%，margin-left: auto会失效
容易被忽略的陷阱：box-sizing 和 border 影响实际贴边位置
即使 top: 0; left: 0; 写了，元素看起来还是“没贴住”，大概率是 border 或 box-sizing 搞的鬼。
立即学习“前端免费学习笔记（深入）”；
-
border会向外撑开，让内容区离边缘有距离；解决方法：用outline替代border（不占布局空间），或确保box-sizing: border-box - 没设
box-sizing: border-box时，width: 100%+border: 2px solid red会让总宽度超父容器，造成横向滚动或错位 - 父元素若有
overflow: hidden，而子元素因border或transform微微溢出，可能被裁剪，看似“没贴上”
left: 0，先确认父有没有 padding、子有没有默认 margin、边框算不算进尺寸——这些才是实际开发中最常卡住的地方。 
