display属性决定元素布局类型；flex中justify-content控主轴、align-items控交叉轴；absolute定位依赖最近定位祖先；sticky是条件固定定位；flex/grid中margin:auto可垂直居中。
display 属性控制元素的布局类型
display 是 CSS 布局的起点，它决定元素是块级、行内、脱离文档流，还是参与 Flex/Grid 布局。常见值不是互斥的，但用错会导致意料外的盒模型行为。
-
display: block：强制独占一行，可设宽高、内外边距；div默认值 -
display: inline：不换行，忽略width/height，vertical-align生效；span默认值 -
display: inline-block：保留行内特性（不换行），同时支持宽高和块级盒模型；常用于导航菜单项对齐 -
display: none：完全移出渲染树，不占空间；和visibility: hidden有本质区别
button {
display: inline-block;
width: 120px;
margin-right: 8px;
}注意：display: flex 和 display: grid 会创建新的格式化上下文，子元素的 float、clear、vertical-align 全部失效。
flex 布局中 justify-content 和 align-items 的作用对象不同
justify-content 控制主轴（main axis）上的对齐，align-items 控制交叉轴（cross axis）上的对齐。主轴方向由 flex-direction 决定——默认是 row（水平向右），此时主轴是水平方向，justify-content 水平生效，align-items 垂直生效。
- 若改用
flex-direction: column，主轴变成垂直向下，justify-content就控制垂直对齐，align-items反而管水平 -
align-self可在单个子元素上覆盖align-items，但对justify-content没有对应项
.container {
display: flex;
flex-direction: row; /* 主轴：水平 */
justify-content: center; /* 子项水平居中 */
align-items: flex-start; /* 子项顶部对齐 */
}容易踩坑：在 flex-direction: column 下仍写 justify-content: center 却期待水平居中——实际是垂直居中，水平方向反而没约束。
立即学习“前端免费学习笔记（深入）”；
position: absolute 的定位基准取决于最近的定位祖先
position: absolute 的元素会脱离文档流，并相对于最近的已定位祖先元素（即 position 值为 relative、absolute、fixed 或 sticky）进行偏移。若没有这样的祖先，则相对于初始包含块（通常是视口）。
- 父容器忘记加
position: relative，子元素的top: 0; right: 0就可能飞到整个页面右上角 -
position: sticky是相对滚动容器的“条件定位”，它既不是纯相对定位，也不是绝对定位，触发后行为类似fixed，但只在容器范围内生效
.dropdown {
position: relative; /* 必须加，否则 .menu 会相对 body 定位 */
}
.menu {
position: absolute;
top: 100%;
left: 0;
}注意：z-index 只对定位元素（position 不为 static）有效，且需注意层叠上下文是否被父级 transform、opacity 等属性意外创建。
margin auto 在 flex 和 grid 中的行为与块级流中不同
在传统块级流中，margin: 0 auto 能让块级元素水平居中，前提是它有明确宽度且不浮动。但在 Flex 和 Grid 容器中，margin: auto 的能力更强：它可以沿任意轴（包括垂直方向）推动元素到可用空间的中间位置。
- Flex 容器内：子元素设
margin: auto，会同时在主轴和交叉轴上居中（相当于同时触发justify-content和align-items的效果） - Grid 容器内：同样适用，且可单独设
margin-left: auto或margin-bottom: auto实现单侧推挤 - 但若父容器不是 Flex/Grid，
margin: auto在垂直方向无效（块级流中无法撑开父容器高度）
.card {
display: flex;
}
.content {
margin: auto; /* 水平 + 垂直居中，无需设宽高 */
}关键点：不要依赖 margin: auto 在普通块流中实现垂直居中——那基本不可靠，该用 Flex 就用 Flex。
