css布局属性常见用法_掌握布局基础

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。