现代CSS技术✅

本主题涵盖现代CSS技术和新特性，包括CSS变量、容器查询、现代布局技术等。

什么是CSS变量（CSS Custom Properties）？

答案

核心概念

CSS变量（CSS Custom Properties）是CSS3引入的新特性，允许开发者定义可重用的值，提高CSS的可维护性和灵活性。

基本语法

/* 定义变量 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --border-radius: 4px;
  --font-size: 16px;
}

/* 使用变量 */
.button {
  background: var(--primary-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size);
}

变量作用域

/* 全局变量 */
:root {
  --global-color: blue;
}

/* 局部变量 */
.container {
  --local-color: red;
}

/* 继承变量 */
.child {
  color: var(--local-color); /* 继承父元素的变量 */
}

动态修改变量

// 通过JavaScript动态修改CSS变量
document.documentElement.style.setProperty('--primary-color', '#ff0000');

// 获取CSS变量值
const color = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

实际应用

/* 主题切换 */
:root {
  --bg-color: white;
  --text-color: black;
  --border-color: #ddd;
}

[data-theme="dark"] {
  --bg-color: #333;
  --text-color: white;
  --border-color: #555;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

.card {
  border: 1px solid var(--border-color);
}

/* 响应式变量 */
:root {
  --spacing: 20px;
}

@media (max-width: 768px) {
  :root {
    --spacing: 10px;
  }
}

.container {
  padding: var(--spacing);
}

面试官视角

差：不了解CSS变量概念，无法使用
良：知道基本语法，能使用CSS变量
优：深入理解变量机制，能灵活运用解决复杂问题

延伸阅读

MDN: CSS变量 - 官方文档
CSS变量详解 - 学习指南

什么是CSS容器查询？

答案

核心概念

CSS容器查询（Container Queries）是一种新的CSS特性，允许根据容器的大小而不是视口大小来应用样式，实现更精确的响应式设计。

基本语法

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

/* 基于容器大小的查询 */
@container card (min-width: 400px) {
  .card__title {
    font-size: 24px;
  }
  
  .card__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@container card (max-width: 399px) {
  .card__title {
    font-size: 18px;
  }
  
  .card__content {
    display: block;
  }
}

容器类型

inline-size：基于内联轴（水平方向）
block-size：基于块轴（垂直方向）
size：基于两个轴

/* 不同容器类型 */
.horizontal-container {
  container-type: inline-size;
}

.vertical-container {
  container-type: block-size;
}

.full-container {
  container-type: size;
}

实际应用

/* 卡片组件 */
.card {
  container-type: inline-size;
  border: 1px solid #ddd;
  padding: 16px;
}

/* 小容器样式 */
@container (max-width: 300px) {
  .card {
    padding: 8px;
  }
  
  .card__title {
    font-size: 16px;
  }
  
  .card__content {
    font-size: 14px;
  }
}

/* 大容器样式 */
@container (min-width: 301px) {
  .card {
    padding: 24px;
  }
  
  .card__title {
    font-size: 24px;
  }
  
  .card__content {
    font-size: 16px;
  }
}

面试官视角

差：不了解容器查询概念
良：知道基本语法，能使用容器查询
优：深入理解容器查询机制，能灵活运用

延伸阅读

MDN: CSS容器查询 - 官方文档
容器查询详解 - 学习指南

什么是CSS Grid子网格（Subgrid）？

答案

核心概念

CSS Grid子网格（Subgrid）是CSS Grid布局的扩展功能，允许网格项目的子元素继承父网格的轨道定义，实现更复杂的嵌套网格布局。

基本语法

/* 父网格 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 子网格 */
.grid-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

实际应用

/* 卡片网格布局 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.card__header {
  grid-column: 1 / -1;
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.card__content {
  grid-column: 1 / -1;
  padding: 16px;
}

.card__footer {
  grid-column: 1 / -1;
  padding: 16px;
  background: #f8f9fa;
  border-top: 1px solid #ddd;
}

面试官视角

差：不了解子网格概念
良：知道基本语法，能使用子网格
优：深入理解子网格机制，能灵活运用

延伸阅读

MDN: CSS子网格 - 官方文档
子网格详解 - 学习指南

什么是CSS层叠层（Cascade Layers）？

答案

核心概念

CSS层叠层（Cascade Layers）是CSS的新特性，允许开发者创建命名的样式层，控制样式的优先级和覆盖顺序。

基本语法

/* 定义层叠层 */
@layer base, components, utilities;

/* 在指定层中定义样式 */
@layer base {
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
  }
}

@layer components {
  .button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .text-left { text-align: left; }
}

层叠顺序

/* 层叠层的优先级顺序 */
@layer base, components, utilities;

/* 后面的层会覆盖前面的层 */
@layer base {
  .title { color: black; }
}

@layer utilities {
  .title { color: red; } /* 会覆盖base层的样式 */
}

实际应用

/* 框架样式层 */
@layer framework {
  .btn {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
  }
}

/* 组件样式层 */
@layer components {
  .btn--primary {
    background: #007bff;
    color: white;
  }
  
  .btn--secondary {
    background: #6c757d;
    color: white;
  }
}

/* 工具样式层 */
@layer utilities {
  .btn--large {
    padding: 12px 24px;
    font-size: 16px;
  }
}

面试官视角

差：不了解层叠层概念
良：知道基本语法，能使用层叠层
优：深入理解层叠层机制，能灵活运用

延伸阅读

MDN: CSS层叠层 - 官方文档
层叠层详解 - 学习指南

什么是CSS嵌套（CSS Nesting）？

答案

核心概念

CSS嵌套（CSS Nesting）是CSS的新特性，允许在CSS规则内部嵌套其他规则，提高代码的可读性和维护性。

基本语法

/* 基本嵌套 */
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  /* 嵌套子元素 */
  .card__title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .card__content {
    line-height: 1.6;
    
    /* 嵌套伪类 */
    &:hover {
      background: #f8f9fa;
    }
  }
  
  /* 嵌套媒体查询 */
  @media (max-width: 768px) {
    padding: 16px;
    
    .card__title {
      font-size: 20px;
    }
  }
}

嵌套选择器

/* 嵌套选择器 */
.nav {
  display: flex;
  gap: 20px;
  
  /* 嵌套子选择器 */
  & > li {
    list-style: none;
  }
  
  /* 嵌套组合选择器 */
  & + .nav {
    margin-top: 20px;
  }
  
  /* 嵌套属性选择器 */
  &[data-vertical] {
    flex-direction: column;
  }
}

实际应用

/* 组件嵌套 */
.button {
  display: inline-block;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  /* 嵌套变体 */
  &--primary {
    background: #007bff;
    color: white;
    
    &:hover {
      background: #0056b3;
    }
  }
  
  &--secondary {
    background: #6c757d;
    color: white;
    
    &:hover {
      background: #545b62;
    }
  }
  
  /* 嵌套状态 */
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  /* 嵌套媒体查询 */
  @media (max-width: 768px) {
    padding: 12px 20px;
    font-size: 16px;
  }
}

面试官视角

差：不了解CSS嵌套概念
良：知道基本语法，能使用CSS嵌套
优：深入理解嵌套机制，能灵活运用

延伸阅读

MDN: CSS嵌套 - 官方文档
CSS嵌套详解 - 学习指南

什么是CSS变量（CSS Custom Properties）？​

什么是CSS容器查询？​

什么是CSS Grid子网格（Subgrid）？​

什么是CSS层叠层（Cascade Layers）？​

什么是CSS嵌套（CSS Nesting）？​

什么是CSS变量（CSS Custom Properties）？

什么是CSS容器查询？

什么是CSS Grid子网格（Subgrid）？

什么是CSS层叠层（Cascade Layers）？

什么是CSS嵌套（CSS Nesting）？