Advanced 


https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment

1. Cascade Layers#

一句话：@layer 可以把 CSS 来源分层，减少 specificity 斗争。

demo: layer order beats selector fight#

<!doctype html>
<html>
<head>
  <style>
    @layer reset, components, utilities;

    @layer components {
      .button {
        padding: 10px 14px;
        border: 0;
        border-radius: 8px;
        background: #2563eb;
        color: white;
      }
    }

    @layer utilities {
      .bg-danger {
        background: #dc2626;
      }
    }
  </style>
</head>
<body>
  <button class="button bg-danger">Danger</button>
</body>
</html>
观察:
    utilities layer 在 components 后声明
    .bg-danger 可以覆盖 .button background

项目结构:
    reset -> base -> components -> utilities

2. Margin Collapse#

一句话：垂直 margin 有时会合并，所以 spacing 不总是简单相加。

demo: margin collapse#

<!doctype html>
<html>
<head>
  <style>
    .a {
      margin-bottom: 40px;
      padding: 12px;
      background: #dbeafe;
    }

    .b {
      margin-top: 40px;
      padding: 12px;
      background: #bbf7d0;
    }
  </style>
</head>
<body>
  <div class="a">margin-bottom: 40px</div>
  <div class="b">margin-top: 40px</div>
</body>
</html>
观察:
    两个垂直 margin 可能 collapse 成 40px
    不是 80px

实践:
    component internal spacing 用 padding/gap 更稳定
    list spacing 优先用 flex/grid gap

3. Block Formatting Context#

一句话：BFC 是一个独立布局环境，可以包住 float、阻止某些 margin collapse。

demo: flow-root contains float#

<!doctype html>
<html>
<head>
  <style>
    .card {
      display: flow-root;
      width: 320px;
      padding: 12px;
      border: 1px solid #e5e7eb;
    }

    .avatar {
      float: left;
      width: 64px;
      height: 64px;
      margin-right: 12px;
      background: #bfdbfe;
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="avatar"></div>
    <p>display: flow-root creates a block formatting context that contains the float.</p>
  </div>
</body>
</html>
重点:
    现代项目很少主动用 float 做布局
    但 BFC 思维能解释很多历史 CSS 行为

4. Containing Block#

一句话：absolute 元素的位置不是凭空算的，它依赖 containing block。

demo: absolute anchor#

<!doctype html>
<html>
<head>
  <style>
    .card {
      position: relative;
      width: 260px;
      height: 140px;
      border: 1px solid #e5e7eb;
    }

    .menu {
      position: absolute;
      right: 12px;
      bottom: 12px;
      padding: 8px 10px;
      background: #0f172a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="menu">Menu</div>
  </div>
</body>
</html>
观察:
    card 有 position: relative
    menu 的 right/bottom 按 card 计算
    去掉 relative 后，menu 会去找更外层 containing block

5. Stacking Context#

一句话：z-index 只在自己的 stacking context 里比较，不是全局数字大战。

demo: z-index trap#

<!doctype html>
<html>
<head>
  <style>
    .parent-a {
      position: relative;
      z-index: 1;
      margin: 24px;
      padding: 24px;
      background: #dbeafe;
    }

    .parent-b {
      position: relative;
      z-index: 2;
      margin: -40px 60px;
      padding: 24px;
      background: #fecaca;
    }

    .child {
      position: relative;
      z-index: 999;
      background: white;
      padding: 12px;
    }
  </style>
</head>
<body>
  <div class="parent-a">
    <div class="child">z-index: 999 inside parent-a</div>
  </div>
  <div class="parent-b">parent-b z-index: 2</div>
</body>
</html>
观察:
    child 的 999 不能跳出 parent-a 的 stacking context
    parent-b 的 z-index: 2 仍然可能盖住它

6. Intrinsic Sizing#

一句话：元素有自己的内容尺寸，min-content / max-content / fit-content 可以利用它。

demo: content-based buttons#

<!doctype html>
<html>
<head>
  <style>
    .row {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 12px;
      align-items: center;
    }

    .label {
      padding: 8px;
      background: #fef3c7;
    }

    input {
      min-width: 0;
      padding: 8px;
    }
  </style>
</head>
<body>
  <div class="row">
    <label class="label">Email address</label>
    <input placeholder="name@example.com" />
  </div>
</body>
</html>
关键:
    max-content column fits label content
    1fr input takes remaining space
    min-width: 0 allows input to shrink inside grid/flex

7. Overflow#

一句话：overflow 不是只用来加滚动条，它也是布局边界控制。

demo: scroll area#

<!doctype html>
<html>
<head>
  <style>
    .panel {
      width: 320px;
      height: 160px;
      overflow: auto;
      border: 1px solid #e5e7eb;
      padding: 12px;
    }

    .item {
      padding: 8px;
      border-bottom: 1px solid #e5e7eb;
    }
  </style>
</head>
<body>
  <div class="panel">
    <div class="item">Order 1</div>
    <div class="item">Order 2</div>
    <div class="item">Order 3</div>
    <div class="item">Order 4</div>
    <div class="item">Order 5</div>
    <div class="item">Order 6</div>
  </div>
</body>
</html>
实践:
    fixed-height panel must define overflow behavior
    avoid hidden unless clipping is intentional
    modal/body scroll should be designed explicitly

8. Logical Properties#

一句话：inline / block 方向比 left/right 更适合国际化和书写方向。

demo: logical spacing#

<!doctype html>
<html>
<head>
  <style>
    .box {
      margin-inline: auto;
      padding-block: 16px;
      padding-inline: 24px;
      max-inline-size: 420px;
      border: 1px solid #e5e7eb;
    }
  </style>
</head>
<body>
  <div class="box">margin-inline and padding-inline follow writing direction.</div>
</body>
</html>
对应关系:
    inline:
        text direction axis

    block:
        paragraph stacking axis

常用:
    margin-inline
    padding-inline
    inline-size
    block-size

9. Accessibility CSS#

一句话：CSS 会影响可访问性，尤其是 focus、contrast、reduced motion。

demo: reduced motion#

<!doctype html>
<html>
<head>
  <style>
    .box {
      width: 80px;
      height: 80px;
      background: #2563eb;
      animation: slide 1200ms infinite alternate ease-in-out;
    }

    @keyframes slide {
      from { transform: translateX(0); }
      to { transform: translateX(160px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .box {
        animation: none;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
实践:
    keep focus-visible visible
    text contrast must be readable
    honor prefers-reduced-motion
    do not use display: none for content that screen readers still need

10. Debug CSS#

一句话：CSS 调试要先定位 layout context 和 cascade source。

demo: debug outline#

<!doctype html>
<html>
<head>
  <style>
    * {
      outline: 1px solid rgba(37, 99, 235, 0.35);
    }

    .layout {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 12px;
    }
  </style>
</head>
<body>
  <div class="layout">
    <aside>Sidebar</aside>
    <main>Main</main>
  </div>
</body>
</html>
debug order:
    inspect computed style
    check matched CSS rules
    check box model panel
    check parent display
    check width/min-width/max-width
    add temporary outline/background
Backward Layout