【CSS布局核心知识点】

CSS布局核心知识点

浮动布局与清除浮动 浮动元素脱离文档流，需使用clear: both或伪元素清除浮动。BFC（块级格式化上下文）可避免浮动导致的高度塌陷，触发方式包括overflow: hidden或display: flow-root。

Flexbox弹性布局 通过display: flex启用，justify-content控制主轴对齐，align-items控制交叉轴对齐。flex-grow定义项目放大比例，flex-shrink控制缩小比例，flex-basis设置初始尺寸。

Grid网格布局 display: grid创建网格容器，grid-template-columns定义列宽，grid-template-rows定义行高。grid-area配合grid-template-areas可实现可视化布局，gap属性控制网格间距。

响应式设计 媒体查询@media (max-width: 768px)适配不同屏幕，结合相对单位（vw/vh/%）实现流体布局。CSS变量--primary-color提升可维护性，calc()函数实现动态计算。

经典布局案例实现

圣杯布局（HTML优先）

<div class="container">
  <header>Header</header>
  <div class="main">
    <article>Article</article>
    <nav>Nav</nav>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</div>

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav article aside"
    "footer footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr 200px;
  min-height: 100vh;
}
header { grid-area: header; }
article { grid-area: article; }
nav { grid-area: nav; }
aside { grid-area: aside; }
footer { grid-area: footer; }

瀑布流布局（column方案）

.masonry {
  column-count: 3;
  column-gap: 20px;
}
.item {
  break-inside: avoid;
  margin-bottom: 20px;
}

常见问题解决方案

垂直居中 Flex方案：display: flex; align-items: center; justify-content: center; Grid方案：display: grid; place-items: center;

多列等高 Flex容器默认拉伸子项高度，Grid布局中可使用grid-auto-rows: 1fr。传统方案可用display: table-cell配合vertical-align: top。

粘性页脚

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

性能优化技巧

减少重排重绘 使用transform代替top/left动画，避免频繁修改offsetHeight等几何属性。CSS Containment属性contain: layout隔离渲染边界。

硬件加速 触发GPU加速：transform: translateZ(0)或will-change: transform。注意层爆炸问题，合理使用backface-visibility: hidden。

选择器优化 避免嵌套超过3层，ID选择器效率最高。属性选择器[type="text"]比:text性能更好，减少通配符*的使用。