现代CSS布局技术

第10章: 现代CSS布局技术

🎯 本章重点

• 容器查询（Container Queries）深度应用
• 层叠上下文和z-index管理
• CSS嵌套和现代选择器
• 逻辑属性和国际化布局

📖 内容概述

10.1 容器查询高级应用

10.1.1 容器查询基础

/* 定义容器 */
.component {
  container-type: inline-size;
  container-name: card-container;
}

/* 基于容器宽度的查询 */
@container card-container (min-width: 400px) {
  .card {
    grid-template-columns: 1fr 2fr;
    gap: 24px;
  }
  
  .card-image {
    width: 100%;
    height: 200px;
  }
}

@container card-container (min-width: 600px) {
  .card {
    grid-template-columns: 1fr 3fr;
    padding: 32px;
  }
  
  .card-title {
    font-size: 1.5rem;
  }
}

10.1.2 容器查询单位

.component {
  container-type: size;
  container-name: sidebar;
}

/* 使用容器单位 */
.sidebar-content {
  width: 50cqw; /* 容器宽度的50% */
  height: 75cqh; /* 容器高度的75% */
  padding: 10cqi; /* 内联方向的10% */
  margin: 5cqb; /* 块方向的5% */
}

10.2 层叠上下文深度解析

10.2.1 创建层叠上下文

/* 创建层叠上下文的属性 */
.stack-context {
  position: relative;
  z-index: 1;
  opacity: 0.99;
  transform: translateZ(0);
  isolation: isolate;
}

/* 使用isolation控制层叠 */
.isolated-container {
  isolation: isolate;
}

.isolated-container > * {
  z-index: 1;
}

10.2.2 z-index管理策略

/* 使用CSS变量管理z-index */
:root {
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1050;
  --z-tooltip: 1070;
}

.modal {
  z-index: var(--z-modal);
}

.tooltip {
  z-index: var(--z-tooltip);
}

10.3 CSS嵌套和选择器

10.3.1 CSS嵌套语法

/* 传统嵌套写法 */
.card {
  padding: 20px;
  
  & .card-header {
    display: flex;
    align-items: center;
    
    & .card-title {
      font-size: 1.2rem;
      
      &:hover {
        color: blue;
      }
    }
  }
}

10.3.2 现代选择器

/* :is() 选择器 */
:is(.card, .panel, .widget) :is(h1, h2, h3) {
  color: var(--heading-color);
}

/* :has() 选择器 */
.card:has(.card-image) {
  grid-template-columns: 1fr 2fr;
}

.container:has(> .important) {
  border: 2px solid red;
}

10.4 逻辑属性和国际化

10.4.1 逻辑属性

.rtl-support {
  margin-inline-start: 20px;
  margin-inline-end: 10px;
  padding-block-start: 15px;
  padding-block-end: 5px;
  inline-size: 300px;
  block-size: 200px;
}

/* 边框逻辑属性 */
.border-logical {
  border-inline-start: 2px solid black;
  border-inline-end: 1px solid gray;
}

10.4.2 国际化布局

/* 支持多语言方向 */
.menu {
  margin-inline-start: 20px;
}

/* 文本方向相关 */
.multilingual {
  text-align: start;
  float: inline-start;
  clear: inline-start;
}

💡 本章总结

1. 容器查询: 实现真正的组件级响应式
2. 逻辑属性: 支持国际化布局
3. 现代选择器: 更强大的选择能力
4. 层叠管理: 更好的z-index控制

（后续内容将在下一章继续）