我的博客

CSS 在过去几年中经历了巨大的发展，现代 CSS 提供了许多强大的布局工具。

CSS Grid 进阶

子网格 (Subgrid)

子网格允许子元素使用父网格的轨道：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
 
.grid-item {
  display: grid;
  grid-template-columns: subgrid;
}

网格区域命名

使用命名区域创建直观的布局：

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
 
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Flexbox 实用技巧

自动换行布局

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
 
.flex-wrap > * {
  flex: 1 1 300px;
}

居中技巧

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Container Queries

容器查询是响应式设计的新方式：

.card-container {
  container-type: inline-size;
}
 
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

现代选择器

:has() 伪类

/* 选择包含图片的卡片 */
.card:has(img) {
  border: 2px solid blue;
}
 
/* 选择被悬停项的兄弟元素 */
.list-item:has(~ .list-item:hover) {
  opacity: 0.5;
}

嵌套规则

.card {
  padding: 1rem;
  
  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  & .title {
    font-size: 1.25rem;
  }
}

实用建议

移动优先：始终从移动端布局开始
使用相对单位：rem、em、vh/vw 等
测试真实设备：模拟器无法完全替代真机测试

总结

现代 CSS 让布局变得更加简单和强大，值得投入时间学习这些新特性。