CSS-从0开始-20260408

walking957
2 阅读46分钟

CSS

一、CSS 动画与过渡

1. CSS 动画 vs 过渡

问题：CSS 动画 vs 过渡

答案： 核心回答：过渡（transition）用于简单的状态变化动画，动画（animation）用于复杂的、多阶段的循环或自动播放动画。

详细说明：

特性transitionanimation
触发方式需要状态变化（hover、click 等）自动播放/循环播放
关键帧只能定义起始和结束状态可定义多个关键帧
循环不能循环可设置循环次数
精确控制有限可暂停、播放、反向
复杂度简单（两个状态）复杂（多状态）
性能可能触发重排重绘可使用 GPU 加速

代码示例：

/* 过渡示例：鼠标悬停时的状态变化 */
.box {
    width: 100px;
    height: 100px;
    background: blue;
    transition: all 0.3s ease;
}

.box:hover {
    width: 200px;
    background: red;
}

/* 动画示例：自动播放的循环动画 */
@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.animated-box {
    animation: slideIn 1s ease-out infinite;
}

/* 带多关键帧的动画 */
@keyframes complexAnimation {
    0% {
        transform: rotate(0deg) scale(1);
        background: red;
    }
    50% {
        transform: rotate(180deg) scale(1.5);
        background: yellow;
    }
    100% {
        transform: rotate(360deg) scale(1);
        background: red;
    }
}

.complex {
    animation: complexAnimation 2s ease-in-out infinite;
}

补充说明：

  • 简单交互效果用 transition 就够了
  • 需要精确控制或循环动画时用 animation
  • 两者可以结合使用

2. animation/transition/transform 区别

问题：animation/transition/transform 区别

答案： 核心回答：transform 是CSS2D/3D变换属性，transition 是状态变化的过渡效果，animation 是关键帧动画。

详细说明：

属性作用使用场景
transform元素的2D/3D变换（旋转、缩放、位移等）不触发重排，性能好
transition属性值变化的过渡效果hover效果、状态切换
animation关键帧定义的动画循环动画、自动播放

代码示例：

/* transform: 2D/3D 变换 */
.transform-demo {
    transform: rotate(45deg);           /* 旋转 */
    transform: scale(1.2);              /* 缩放 */
    transform: translate(100px, 50px);  /* 位移 */
    transform: skew(10deg, 20deg);      /* 倾斜 */
    transform: perspective(500px);      /* 3D透视 */
    
    /* 组合变换 */
    transform: rotate(45deg) scale(1.2) translate(50px, 0);
}

/* transition: 过渡效果 */
.transition-demo {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.transition-demo:hover {
    opacity: 0.5;
    transform: scale(0.8);
}

/* animation: 关键帧动画 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.animation-demo {
    animation: bounce 0.5s ease infinite;
}

补充说明：

  • transform 和 opacity 不会触发重排，适合动画
  • 优先使用 transform 实现动画效果
  • transition 需要触发条件，animation 可自动播放

3. CSS 动画相关的属性及实现一个简单动画效果的要求

问题：CSS 动画相关的属性及实现一个简单动画效果的要求

答案： 核心回答：CSS 动画需要 animation 属性配合 @keyframes 规则实现。

详细说明：

animation 属性详解：

属性说明示例值
animation-name动画名称bounce
animation-duration动画时长1s
animation-timing-function时间函数ease
animation-delay延迟时间0.5s
animation-iteration-count循环次数infinite
animation-direction播放方向alternate
animation-fill-mode填充模式forwards
animation-play-state播放状态paused/running

简写语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

代码示例：

/* 定义关键帧 */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 使用动画 */
.fade-in-box {
    /* 必需属性 */
    animation-name: fadeIn;           /* 动画名称 */
    animation-duration: 1s;           /* 持续时间 */
    
    /* 可选属性 */
    animation-timing-function: ease-out;
    animation-delay: 0.2s;
    animation-iteration-count: 1;     /* 播放1次 */
    animation-direction: normal;
    animation-fill-mode: both;        /* 保持结束状态 */
    
    /* 简写 */
    animation: fadeIn 1s ease-out 0.2s 1 normal both;
}

/* 无限循环动画 */
.loading-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 鼠标悬停暂停 */
.hover-pause:hover {
    animation-play-state: paused;
}

补充说明：

  • @keyframes 至少定义起始和结束状态
  • 百分比可以细分动画步骤
  • animation-fill-mode: forwards 保持动画结束状态

4. CSS 动画与过渡的区别及实现

问题：CSS 动画与过渡的区别及实现

答案： 核心回答：过渡需要触发条件且只能处理两个状态，动画可自动播放、多阶段、循环播放。

详细说明：

区别transitionanimation
触发需要事件触发可自动播放
状态数两状态（开始/结束）多状态（0%/50%/100%）
循环不支持支持
暂停不支持支持

代码示例：

/* 过渡实现：需要 hover 触发 */
.transition {
    width: 100px;
    height: 100px;
    background: blue;
    transition: width 0.5s ease, background 0.3s ease;
}

.transition:hover {
    width: 200px;
    background: red;
}

/* 动画实现：自动播放 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

补充说明：

  • 简单交互用 transition，复杂效果用 animation
  • 两者性能都很好（不触发重排）

5. 如何使用 CSS3 实现动画？animation、transition、transform 有什么区别？

问题：如何使用 CSS3 实现动画？animation、transition、transform 有什么区别？

答案： 核心回答：

  • transform 定义静态变换
  • transition 定义状态变化的过渡
  • animation 定义关键帧动画

详细说明：

属性作用是否需要触发
transform2D/3D变换（旋转、缩放、位移）否（设置即生效）
transition属性值变化的过渡效果需要（hover等）
animation关键帧动画否（可自动播放）

代码示例：

/* transform 变换 */
.box {
    transform: rotate(30deg) scale(1.2) translateX(50px);
}

/* transition 过渡 */
.box {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.box:hover {
    transform: scale(1.5);
}

/* animation 动画 */
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

.box {
    animation: slide 1s ease-in-out;
}

补充说明：

  • 三者可以组合使用
  • 动画优先使用 transform 和 opacity

6. 简单动画示例

问题：简单动画示例

答案： 核心回答：CSS3 动画通过 @keyframes 定义关键帧，配合 animation 属性使用。

代码示例：

/* 淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 1s ease-out;
}

/* 移动动画 */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 旋转动画 */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 缩放动画 */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* 综合示例 */
.animated-element {
    animation: slideIn 0.5s ease-out, pulse 2s ease-in-out 0.5s infinite;
}

7. 创建一个简单动画

问题：创建一个简单动画

答案： 核心回答：使用 @keyframes 定义动画，用 animation 属性应用。

代码示例：

<style>
/* 定义动画 */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.bounce-in {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    animation: bounceIn 1s ease-out;
}

/* 加载动画 */
@keyframes loader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: loader 1s linear infinite;
}
</style>

<div class="bounce-in">弹入动画</div>
<div class="loader"></div>

二、CSS 性能优化

8. 重绘（Repaint）与回流（Reflow）

问题：重绘（Repaint）与回流（Reflow）

答案： 核心回答：回流是元素几何属性变化时重新计算布局，重绘是外观变化但不影响布局。

详细说明：

类型触发条件性能影响
回流（Reflow）几何属性变化（宽高、位置、margin等）严重，性能消耗大
重绘（Repaint）外观变化但几何不变（color、background等）较轻

代码示例：

// 导致回流的操作
element.style.width = '200px';     // 改变宽度
element.style.height = '100px';    // 改变高度
element.style.margin = '20px';     // 改变外边距
element.style.padding = '10px';    // 改变内边距
element.style.display = 'none';     // 显示/隐藏（触发回流）

// 导致重绘的操作
element.style.color = 'red';       // 改变颜色
element.style.background = 'blue'; // 改变背景
element.style.borderColor = 'green'; // 改变边框颜色
element.style.visibility = 'hidden';  // 隐藏（只重绘，不回流）

优化建议：

// 批量修改 DOM，减少回流次数
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const div = document.createElement('div');
    div.textContent = i;
    fragment.appendChild(div);
}
document.body.appendChild(fragment); // 只触发一次回流

// 使用 CSS class 批量修改
element.classList.add('active'); // 一次回流

// 使用 transform 实现动画（不触发回流）
element.style.transform = 'translateX(100px)'; // 不触发回流

补充说明：

  • transform 和 opacity 变化不触发回流重绘
  • 现代浏览器会合并多次回流为一次
  • 读写分离，避免交错读写

9. CSS 的重绘与回流

问题：CSS 的重绘与回流

答案： 核心回答：回流重新计算元素几何位置，重绘只改变外观。回流一定伴随重绘。

详细说明：

类型定义性能消耗
回流（Reflow/Layout）重新计算文档流和几何属性高
重绘（Repaint）外观变化，布局不变低

触发回流的属性：

/* 几何属性 */
width, height, padding, margin
display, position, top, left, right, bottom
border-width, border-height
font-size, font-family, line-height
transform /* 3D变换会触发 */

只触发重绘的属性：

/* 视觉属性 */
color, background, background-image
border-color, border-style
visibility, opacity
outline, box-shadow

代码示例：

// 优化：使用 transform 而非 top/left
// 触发回流（性能差）
box.style.top = '100px';
box.style.left = '50px';

// 性能好（不触发回流）
box.style.transform = 'translate(50px, 100px)';

// 批量修改样式
element.style.cssText = `
    width: 200px;
    height: 100px;
    background: blue;
`; // 合并为一次回流

// 使用 CSS 类
element.className = 'new-styles';

补充说明：

  • 现代浏览器的「渲染队列」机制会合并多次样式变化为一次回流
  • 读取布局属性会强制刷新渲染队列

10. 重绘与回流的触发场景及优化

问题：重绘与回流的触发场景及优化

答案： 核心回答：触发回流的操作应尽量合并或使用 transform/opacity 替代。

详细说明：

触发回流场景：

场景示例
添加/删除元素element.appendChild()
元素尺寸变化style.width = '100px'
内容变化element.textContent = 'new'
浏览器窗口大小window.resize
获取布局信息offsetHeight, scrollTop

优化方法：

// 1. 使用 CSS 类批量修改
element.classList.add('batch-change');

// 2. 使用 DocumentFragment
const fragment = document.createDocumentFragment();
items.forEach(item => fragment.appendChild(item));
container.appendChild(fragment);

// 3. 缓存布局信息
const width = element.offsetWidth; // 缓存一次
console.log(width, width); // 使用缓存

// 4. 使用 transform 替代 top/left
element.style.transform = 'translateY(100px)';

// 5. 使用 opacity 和 visibility
element.style.opacity = '0'; // 不触发回流

补充说明：

  • 读写分离：先统一写，再统一读
  • 使用 will-change 提示浏览器提前优化

11. 浏览器渲染机制与重绘/回流优化

问题：浏览器渲染机制与重绘/回流优化

答案： 核心回答：浏览器渲染流程为 DOM -> CSSOM -> Render Tree -> Layout -> Paint，优化关键在于减少回流重绘。

详细说明：

渲染流程：

HTML → DOM Tree
CSS   → CSSOM Tree
     ↓
Render Tree（渲染树）
     ↓
Layout（布局/回流）
     ↓
Paint（绘制/重绘）
     ↓
Composite（合成）

优化策略：

策略方法
使用 transform/opacity不触发回流重绘
批量 DOM 操作DocumentFragment
读写分离先写后读
CSS 类修改替代逐个 style 修改
will-change提前告知浏览器优化
避免频繁获取布局属性缓存值

代码示例：

/* 使用 transform 动画（最佳性能） */
.animated {
    will-change: transform, opacity;
    animation: move 1s ease infinite;
}

@keyframes move {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

/* 使用 opacity */
.fade {
    transition: opacity 0.3s ease;
}
.fade.hidden {
    opacity: 0;
}

// 优化：使用 requestAnimationFrame
function animate() {
    element.style.transform = `translateX(${++x}px)`;
    requestAnimationFrame(animate);
}

补充说明：

  • 使用 Chrome DevTools 的 Performance 面板分析性能
  • GPU 加速：transform: translateZ(0) 或 will-change

12. 减少重绘和回流的策略

问题：减少重绘和回流的策略

答案： 核心回答：使用 transform/opacity、批量 DOM 操作、缓存布局值、CSS 类切换等策略。

详细说明：

策略说明
使用 transform/opacity不触发回流重绘
批量 DOM 操作DocumentFragment
避免频繁获取布局属性缓存布局值
CSS 类切换替代逐个 style 修改
will-change提示浏览器优化
避免 table 布局使用 flex/grid

代码示例：

// ❌ 错误：频繁触发回流
for (let i = 0; i < 100; i++) {
    element.style.top = i + 'px';  // 每次都触发回流
}

// ✅ 正确：使用 transform
for (let i = 0; i < 100; i++) {
    element.style.transform = `translateY(${i}px)`;
}

// ✅ 正确：批量操作
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const div = document.createElement('div');
    div.textContent = i;
    fragment.appendChild(div);
}
container.appendChild(fragment);

// ✅ 正确：使用 CSS 类
element.classList.add('active', 'animated', 'highlighted');

补充说明：

  • visibility: hidden 只触发重绘，不触发回流
  • 动画使用 requestAnimationFrame

13. 减少重绘与回流的方法？

问题：减少重绘与回流的方法？

答案： 核心回答：使用 transform/opacity 替代位置尺寸变化、批量 DOM 操作、CSS 类修改、缓存布局值。

代码示例：

// 1. 使用 CSS class 批量修改
.element {
    transition: all 0.3s ease;
}
.element.active {
    width: 200px;
    height: 100px;
    background: red;
}

// 2. 批量 DOM 操作
const fragment = document.createDocumentFragment();
data.forEach(item => {
    const div = document.createElement('div');
    div.textContent = item;
    fragment.appendChild(div);
});
document.getElementById('list').appendChild(fragment);

// 3. 缓存布局属性
const height = element.offsetHeight; // 缓存
requestAnimationFrame(() => {
    element.style.height = (height * 2) + 'px';
});

// 4. 使用 transform
element.style.transform = 'translateX(100px)';

// 5. 使用 opacity
element.style.opacity = '0.5';

三、CSS 选择器与优先级

14. CSS 选择器类型（至少 6 种）

问题：CSS 选择器类型（至少 6 种）

答案： 核心回答：CSS 选择器包括基本选择器、组合选择器、属性选择器、伪类、伪元素等。

详细说明：

类型选择器示例
元素选择器elementdiv { }
类选择器.class.btn { }
ID选择器#id#header { }
通配选择器** { }
后代选择器ancestor descendant.content p { }
子选择器parent > child.list > li { }
相邻兄弟prev + nexth1 + p { }
通用兄弟prev ~ siblingsh1 ~ p { }
属性选择器[attr][type="text"] { }
伪类:pseudo-class:hover { }
伪元素::pseudo-element::before { }

代码示例：

/* 基本选择器 */
div { }              /* 元素 */
.box { }             /* 类 */
#app { }             /* ID */
* { }                 /* 通配 */

/* 组合选择器 */
.article h2 { }      /* 后代 */
.menu > li { }       /* 子 */
h1 + p { }           /* 相邻兄弟 */
h1 ~ p { }           /* 通用兄弟 */

/* 属性选择器 */
[type="text"] { }    /* 完全匹配 */
[class^="btn-"] { }  /* 开头匹配 */
[class$="-btn"] { }  /* 结尾匹配 */
[class*="btn"] { }   /* 包含匹配 */

/* 伪类 */
:hover { }           /* 悬停 */
:focus { }           /* 聚焦 */
:first-child { }     /* 首个子元素 */
:nth-child(2n) { }   /* 偶数子元素 */

/* 伪元素 */
::before { }        /* 之前 */
::after { }          /* 之后 */
::first-letter { }   /* 首字母 */
::selection { }      /* 选中内容 */

补充说明：

  • ID 选择器性能最好，但耦合度高
  • 避免使用通配选择器（性能差）
  • 保持选择器简洁，避免嵌套过深

15. CSS 选择器有哪些？优先级如何计算？

问题：CSS 选择器有哪些？优先级如何计算？

答案： 核心回答：CSS 选择器分多种类型，优先级按 ID > 类/属性/伪类 > 元素/伪元素 > 通配符 计算。

详细说明：

选择器类型优先级权重：

!important      → 最高（慎用）
内联样式        → 1000
#ID            → 100
.类/属性/伪类   → 10
元素/伪元素     → 1
通配符          → 0

优先级计算示例：

/* 权重计算 */
#header .nav li:first-child   /* ID(100) + 类(10) + 元素(1) + 伪类(10) = 121 */
.nav .item.active              /* 类(10) + 类(10) + 类(10) = 30 */
div#container                 /* 元素(1) + ID(100) = 101 */

/* 优先级比较 */
#header         /* 100 */
.nav li         /* 10 + 1 = 11 */
.header.nav     /* 10 + 10 = 20 */
div a[href]     /* 1 + 1 + 10 = 12 */

选择器组合：

/* 同优先级：后面的覆盖前面的 */
.box { color: red; }
.box { color: blue; }  /* 最终蓝色 */

/* 不同优先级：高优先级覆盖低优先级 */
#container .box { color: red; }   /* 110 */
.box { color: blue; }             /* 10，最终红色 */

补充说明：

  • 使用 !important 要非常谨慎
  • 避免内联样式和 !important
  • 保持选择器简洁可控

16. CSS 选择器优先级计算规则

问题：CSS 选择器优先级计算规则

答案： 核心回答：CSS 优先级由选择器的 ID、类、元素数量决定，用逗号分隔的四个数字表示（a, b, c, d）。

详细说明：

优先级表示法：

(a, b, c, d)
a: !important 或内联样式
b: ID 选择器数量
c: 类、属性、伪类选择器数量
d: 元素、伪元素选择器数量

计算示例：

/* 1, 0, 0, 0 - !important */
style="color: red!" 

/* 1, 0, 0, 0 - 内联样式 */
<div style="color: red">

/* 0, 1, 0, 0 - 1个ID */
#header

/* 0, 0, 1, 0 - 1个类 */
.nav

/* 0, 0, 0, 1 - 1个元素 */
div

/* 0, 1, 1, 1 - ID + 类 + 元素 */
#nav .menu li

/* 0, 0, 2, 2 - 类(2) + 元素(2) */
.nav:hover p::before

优先级比较规则：

/* 从左到右比较 */
(0, 1, 0, 0) > (0, 0, 10, 0)  /* ID > 10个类 */
(0, 0, 1, 5) > (0, 0, 1, 4)   /* 5个元素 > 4个元素 */

补充说明：

  • 选择器永远不要超过三个条件
  • 尽量使用低优先级的选择器
  • 避免使用 !important

17. 优先级规则（!important > ID > 类/属性/伪类 > 元素 > 通配符）

问题：优先级规则（!important > ID > 类/属性/伪类 > 元素 > 通配符）

答案： 核心回答：CSS 优先级从高到低为 !important > 内联 > ID > 类/属性/伪类 > 元素 > 通配符。

详细说明：

优先级选择器类型权重
1!important最高
2内联样式1000
3ID选择器100
4类/属性/伪类10
5元素/伪元素1
6通配符0

代码示例：

/* !important 最高优先级 */
.element {
    color: red !important;  /* 会覆盖所有其他规则 */
}

/* 内联样式 */
<div style="color: blue">

/* ID 选择器 */
#container { color: green; }

/* 类选择器 */
.box { color: yellow; }

/* 属性选择器 */
[type="text"] { color: orange; }

/* 伪类 */
:hover { color: purple; }

/* 元素选择器 */
div { color: pink; }

/* 伪元素 */
::before { color: cyan; }

/* 通配符（最低） */
* { color: white; }

补充说明：

  • !important 会覆盖其他所有规则
  • 避免使用 !important，维护困难
  • 优先级相同时，后定义的规则生效

四、CSS3 新特性

18. CSS3 新增属性（至少 4 个）

问题：CSS3 新增属性（至少 4 个）

答案： 核心回答：CSS3 新增了圆角、阴影、渐变、Flexbox、Grid、动画、过渡、变换等众多属性。

详细说明：

属性说明示例
border-radius圆角border-radius: 10px;
box-shadow阴影box-shadow: 0 4px 6px rgba(0,0,0,0.1);
text-shadow文字阴影text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
linear-gradient线性渐变background: linear-gradient(red, blue);
radial-gradient径向渐变background: radial-gradient(circle, red, blue);
flexbox弹性盒display: flex;
grid网格布局display: grid;
transform变换transform: rotate(45deg);
transition过渡transition: all 0.3s;
animation动画animation: slide 1s;
@keyframes关键帧@keyframes slide { }
calc()计算width: calc(100% - 20px);
var()变量--color: red;
media queries媒体查询@media (max-width: 768px) { }

代码示例：

/* 圆角和阴影 */
.card {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 渐变背景 */
.button {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Flexbox 布局 */
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Grid 布局 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* 变量 */
:root {
    --primary-color: #3498db;
    --spacing: 20px;
}

.button {
    background: var(--primary-color);
    padding: var(--spacing);
}

/* calc 计算 */
.container {
    width: calc(100% - 40px);
    margin: 0 auto;
}

补充说明：

  • CSS3 新特性需要考虑浏览器兼容性
  • 使用 Autoprefixer 自动添加前缀
  • 部分属性需要 -webkit- 等前缀

19. CSS3 中有哪些新特性？transform 属性的作用是什么？

问题：CSS3 中有哪些新特性？transform 属性的作用是什么？

答案： 核心回答：CSS3 新特性包括布局（Flexbox/Grid）、图形（圆角/阴影/渐变）、动画（transition/animation）和变量等。transform 用于2D/3D变换。

详细说明：

CSS3 新特性分类：

类别新特性
布局Flexbox、Grid、CSS Calc
图形border-radius、box-shadow、gradient
动画transition、animation、transform
文字text-shadow、@font-face、text-overflow
背景background-size、background-clip
边框border-image、border-radius
其他CSS变量、CSS Houdini

transform 属性：

/* 2D 变换 */
transform: translate(tx, ty);    /* 位移 */
transform: rotate(angle);       /* 旋转 */
transform: scale(sx, sy);        /* 缩放 */
transform: skew(ax, ay);        /* 倾斜 */
transform: matrix(a, b, c, d, e, f); /* 矩阵变换 */

/* 3D 变换 */
transform: perspective(n);      /* 透视 */
transform: rotateX(angle);      /* X轴旋转 */
transform: rotateY(angle);      /* Y轴旋转 */
transform: rotateZ(angle);      /* Z轴旋转 */
transform: translateZ(tz);      /* Z轴位移 */
transform: translate3d(tx, ty, tz); /* 3D位移 */

/* 组合变换 */
transform: rotate(45deg) scale(1.2) translate(100px, 0);

代码示例：

/* transform 实现居中 */
.center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 3D 翻转卡片 */
.card {
    perspective: 1000px;
}

.card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

补充说明：

  • transform 不会触发回流，性能好
  • transform 与 opacity 适合动画
  • 3D 变换需要设置 perspective

20. CSS 预处理器（Sass/Less）的使用

问题：CSS 预处理器（Sass/Less）的使用

答案： 核心回答：CSS 预处理器提供变量、嵌套、混合、继承等功能，提升 CSS 编写效率和可维护性。

详细说明：

特性SassLess
变量$color: red@color: red
嵌套支持支持
混合@mixin.class
继承@extend:extend
函数内置函数内置函数
引入@import@import

代码示例（SCSS）：

// 变量
$primary-color: #3498db;
$spacing: 20px;

// 嵌套
.nav {
    ul {
        display: flex;
        li {
            padding: $spacing;
            &:hover {
                background: $primary-color;
            }
        }
    }
}

// 混合
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    @include flex-center;
}

// 带参数的混合
@mixin button-variant($color) {
    background: $color;
    color: white;
    &:hover {
        background: darken($color, 10%);
    }
}

.btn-primary {
    @include button-variant($primary-color);
}

// 继承
.message {
    padding: 10px;
    border: 1px solid #ddd;
}

.success {
    @extend .message;
    border-color: green;
}

// 计算
.container {
    width: 100% - $spacing * 2;
}

代码示例（Less）：

// 变量
@primary-color: #3498db;
@spacing: 20px;

// 嵌套
.nav {
    ul {
        display: flex;
        li {
            padding: @spacing;
            &:hover {
                background: @primary-color;
            }
        }
    }
}

// 混合
.flex-center() {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    .flex-center();
}

// 继承
.message {
    padding: 10px;
    border: 1px solid #ddd;
}

.success {
    &:extend(.message);
    border-color: green;
}

补充说明：

  • Sass 功能更强大，社区更广
  • Less 语法更接近 CSS，上手容易
  • 两者都需要编译为普通 CSS 使用

21. BEM 等命名规范

问题：BEM 等命名规范

答案： 核心回答：BEM（Block-Element-Modifier）是一种 CSS 命名规范，提高代码可读性和可维护性。

详细说明：

BEM 命名规则：

Block__Element--Modifier
块__元素--修饰符
部分说明示例
Block独立功能块.card
Element块的子元素.card__title
Modifier块的变体.card--featured

代码示例：

/* Block */
.card { }

/* Element */
.card__image { }
.card__title { }
.card__content { }
.card__footer { }

/* Modifier */
.card--featured { }
.card--disabled { }

/* 组合使用 */
.card__button--primary { }
.card__button--secondary { }

HTML 示例：

<!-- Block -->
<article class="card card--featured">
    <!-- Element -->
    <img class="card__image" src="..." alt="...">
    <h2 class="card__title">标题</h2>
    <p class="card__content">内容</p>
    <div class="card__footer">
        <!-- Modifier -->
        <button class="card__button card__button--primary">主要按钮</button>
        <button class="card__button card__button--secondary">次要按钮</button>
    </div>
</article>

其他命名规范：

/* OOCSS - 结构和皮肤分离 */
.media { display: flex; }
.media__image { }
.media--centered { justify-content: center; }

/* SMACSS - 状态/布局/模块 */
.layout-container { }
.module-button { }
.is-active { }
.state-error { }

补充说明：

  • BEM 适合大型项目
  • 选择一种规范并保持一致
  • 不要过度嵌套（不超过3层）

22. CSS Hack 类型

问题：CSS Hack 类型

答案： 核心回答：CSS Hack 是针对不同浏览器特性进行兼容性处理的技术，包括条件注释、属性前缀、选择器hack等。

详细说明：

Hack类型方法示例
条件注释HTML注释<!--[if IE]>
属性前缀浏览器前缀-webkit-, -moz-
选择器hack特殊选择器*html #header
属性hack特殊符号_property: value

代码示例：

/* 属性前缀 */
-webkit-transform: rotate(45deg);  /* Chrome/Safari */
-moz-transform: rotate(45deg);     /* Firefox */
-ms-transform: rotate(45deg);      /* IE */
-o-transform: rotate(45deg);      /* Opera */
transform: rotate(45deg);          /* 标准 */

/* 选择器 hack - IE6/7 */
* html .container { }     /* IE6 */
*+html .container { }     /* IE7 */

/* 属性 hack - IE6 */
_width: 200px;            /* IE6 */

/* 属性 hack - IE7 */
*+width: 200px;           /* IE7 */

/* 属性 hack - IE8 */
width: 200px\0;            /* IE8 */

/* 属性 hack - IE9+ */
width: 200px\9;            /* IE6-10 */

/* 使用 @supports 查询 */
@supports (display: grid) {
    .container {
        display: grid;
    }
}

/* 使用 Modernizr 检测 */
.fallback-grid {
    display: flex;  /* 默认 */
}
.grid-supported .fallback-grid {
    display: grid;  /* 支持 grid 时覆盖 */
}

补充说明：

  • 优先使用标准写法，hack 作为最后手段
  • 使用 Autoprefixer 自动处理前缀
  • 考虑使用 polyfill 或降级方案

五、Flexbox 与 Grid 布局

23. Flex 布局

问题：Flex 布局

答案： 核心回答：Flexbox 是一维布局模型，用于在一条轴线上排列元素。

详细说明：

容器属性：

.container {
    display: flex;              /* 块级弹性容器 */
    display: inline-flex;       /* 行内弹性容器 */
    
    /* 主轴方向 */
    flex-direction: row | column | row-reverse | column-reverse;
    
    /* 主轴换行 */
    flex-wrap: nowrap | wrap | wrap-reverse;
    
    /* 主轴对齐 */
    justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;
    
    /* 交叉轴对齐 */
    align-items: stretch | flex-start | center | flex-end | baseline;
    
    /* 多行对齐 */
    align-content: flex-start | center | flex-end | space-between | space-around | stretch;
}

项目属性：

.item {
    /* 分配剩余空间 */
    flex-grow: 0;     /* 放大比例 */
    flex-shrink: 1;   /* 缩小比例 */
    flex-basis: auto; /* 初始大小 */
    
    /* 简写 */
    flex: 1;          /* 等分剩余空间 */
    
    /* 单项目对齐 */
    align-self: auto | flex-start | center | flex-end;
    
    /* 排列顺序 */
    order: 0;
}

代码示例：

/* 水平居中 */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 两端对齐 */
.flex-between {
    display: flex;
    justify-content: space-between;
}

/* 等高列 */
.flex-equal {
    display: flex;
}

.flex-equal > * {
    flex: 1;
}

/* 圣杯布局 */
.holy-grail {
    display: flex;
}
.holy-grail main {
    flex: 1;
}
.holy-grail aside {
    flex: 0 0 200px;
}

补充说明：

  • Flexbox 是一维布局，适合单行或单列
  • Flexbox 的自动外边距不会合并
  • 使用 gap 属性代替 margin 实现间距

24. Flex 布局的原理及使用场景

问题：Flex 布局的原理及使用场景

答案： 核心回答：Flexbox 通过容器和项目两个层面的属性控制元素在主轴和交叉轴上的排列和对齐。

详细说明：

工作原理：

主轴（Main Axis）：元素排列的方向
交叉轴（Cross Axis）：垂直于主轴的方向

使用场景：

场景解决方案
水平垂直居中justify-content: center; align-items: center;
两端对齐中间自适应justify-content: space-between;
等高列布局align-items: stretch;
圣杯布局flex + main + aside
Sticky Footerflex-direction: column + flex: 1
列表均匀分布justify-content: space-evenly;
表单对齐align-items: baseline;

代码示例：

/* 1. 垂直水平居中 */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. Sticky Footer */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page-header { }
.page-content { flex: 1; }
.page-footer { }

/* 3. 列表均匀分布 */
.nav {
    display: flex;
    justify-content: space-evenly;
}

/* 4. 表单项对齐 */
.form-row {
    display: flex;
    align-items: baseline;
}
.form-row label {
    width: 100px;
}
.form-row input {
    flex: 1;
}

补充说明：

  • Flexbox 很适合组件内部布局
  • 页面整体布局可以用 Grid
  • gap 属性可以控制 flex 项目间距

25. Flex 布局是如何工作的？相关属性有哪些？

问题：Flex 布局是如何工作的？相关属性有哪些？

答案： 核心回答：Flexbox 通过设置 display: flex 将容器变为弹性盒子，通过容器属性和项目属性控制布局。

详细说明：

容器属性：

.flex-container {
    /* 创建弹性容器 */
    display: flex | inline-flex;
    
    /* 主轴方向 */
    flex-direction: row | column;
    
    /* 换行 */
    flex-wrap: nowrap | wrap;
    
    /* 主轴对齐方式 */
    justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;
    
    /* 交叉轴对齐方式 */
    align-items: stretch | flex-start | center | flex-end | baseline;
    
    /* 多根轴线对齐 */
    align-content: flex-start | center | flex-end | space-between | space-around | stretch;
}

项目属性：

.flex-item {
    /* 伸展性 */
    flex-grow: 0;  /* 项目放大比例 */
    flex-shrink: 1; /* 项目缩小比例 */
    flex-basis: auto; /* 初始大小 */
    
    /* 简写形式 */
    flex: 0 1 auto;
    
    /* 单独对齐 */
    align-self: auto | flex-start | center | flex-end;
    
    /* 排列顺序 */
    order: 0;  /* 数值越小越靠前 */
}

代码示例：

/* 主轴为水平方向，从左到右 */
.container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

/* 主轴为垂直方向，从上到下 */
.vertical {
    display: flex;
    flex-direction: column;
}

/* 项目等宽 */
.equal-width {
    display: flex;
}
.equal-width > * {
    flex: 1;
}

补充说明：

  • flex: 1 表示 flex-grow: 1; flex-shrink: 1; flex-basis: 0%
  • flex-wrap 默认不换行，可能导致项目被压缩

26. 不同的布局方式（如 Flex 布局、Grid 布局等）的特点及应用场景

问题：不同的布局方式（如 Flex 布局、Grid 布局等）的特点及应用场景

答案： 核心回答：Flexbox 适合一维布局（单轴线），Grid 适合二维布局（行和列）。

详细说明：

布局方式维度特点适用场景
Flexbox一维轴线排列导航栏、表单、行内对齐
Grid二维行列网格页面整体布局、相册
Float一维文本环绕图文混排（历史方案）
Position特殊定位覆盖层、固定header
Table二维表格表格数据（不推荐用于布局）
Multi-column一维多列文本分栏

代码示例：

/* Flexbox - 组件内水平/垂直居中 */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Grid - 页面整体布局 */
.page-layout {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
}

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

/* 多列布局 - 文本分栏 */
.article {
    column-count: 2;
    column-gap: 40px;
}

补充说明：

  • 现代 CSS 布局优先使用 Flexbox 和 Grid
  • 可以组合使用（外层 Grid，内层 Flexbox）

27. Grid 布局

问题：Grid 布局

答案： 核心回答：CSS Grid 是二维布局系统，同时控制行和列。

详细说明：

容器属性：

.grid-container {
    display: grid | inline-grid;
    
    /* 定义列 */
    grid-template-columns: 100px 1fr 2fr;  /* 固定+自适应+比例 */
    grid-template-rows: auto 1fr auto;
    
    /* 定义间距 */
    gap: 20px;
    row-gap: 10px;
    column-gap: 20px;
    
    /* 定义区域 */
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    
    /* 简写 */
    grid-template: auto 1fr auto / 200px 1fr;
}

项目属性：

.grid-item {
    /* 放置到指定区域 */
    grid-area: header;
    
    /* 放置到指定行列 */
    grid-column: 1 / 3;    /* 从第1列到第3列 */
    grid-row: 1 / 2;
    
    /* 简写 */
    grid-area: 1 / 1 / 2 / 3;  /* row-start / col-start / row-end / col-end */
    
    /* 跨越 */
    grid-column: span 2;    /* 跨越2列 */
}

代码示例：

/* 典型页面布局 */
.page {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* 响应式网格 */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

补充说明：

  • Grid 适合页面整体布局
  • Flexbox 适合组件内部布局
  • 可以结合使用

28. Grid 布局特点及应用场景

问题：Grid 布局特点及应用场景

答案： 核心回答：Grid 是二维布局，可以同时定义行和列，适合复杂的页面结构和网格系统。

详细说明：

特点说明
二维布局同时控制行和列
轨道系统灵活定义网格线
区域命名通过命名区域简化布局
定位精确项目可以精确放置
响应式auto-fit/auto-fill 实现自适应

应用场景：

场景示例
页面整体布局经典圣杯/双飞翼布局
卡片网格产品列表、相册
仪表盘管理后台
栅格系统Bootstrap 替代

代码示例：

/* 页面布局 */
.dashboard {
    display: grid;
    grid-template-areas:
        "nav nav nav"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 60px 1fr 40px;
    min-height: 100vh;
}

/* 自适应网格 */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* 密集网格 */
.compact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

补充说明：

  • Grid 可以实现 Flexbox 的所有功能，但 Flexbox 更简洁
  • 简单的一维布局优先使用 Flexbox

29. Grid 布局的特点和应用场景是什么？

问题：Grid 布局的特点和应用场景是什么？

答案： 核心回答：Grid 是二维布局系统，同时控制行和列，适合复杂页面布局和网格系统。

代码示例：

/* 典型布局 */
.layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}

/* 网格系统 */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

/* 12栏布局示例 */
.col-4 {
    grid-column: span 4;
}
.col-8 {
    grid-column: span 8;
}

30. Flex 布局的原理和应用场景

问题：Flex 布局的原理和应用场景

答案： 核心回答：Flexbox 基于主轴和交叉轴工作，通过容器和项目属性实现灵活的弹性布局。

代码示例：

/* 水平居中 */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 两端对齐 */
.space-between {
    display: flex;
    justify-content: space-between;
}

/* 等宽卡片 */
.cards {
    display: flex;
    gap: 20px;
}
.cards > * {
    flex: 1;
}

/* 媒体对象 */
.media {
    display: flex;
}
.media-content {
    flex: 1;
}
.media-aside {
    flex-shrink: 0;
    margin-left: 20px;
}

六、其他 CSS 特性

31. 元素居中方法

问题：元素居中方法

答案： 核心回答：元素居中有多种方法，包括 Flexbox、Grid、绝对定位和负 margin 等。

详细说明：

方法适用场景代码
Flexbox通用display: flex; justify-content: center; align-items: center;
Grid通用display: grid; place-items: center;
绝对定位已知尺寸position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
负margin已知尺寸position: absolute; top: 50%; left: 50%; margin-top: -height/2; margin-left: -width/2;
margin: autoFlex/Grid子元素margin: auto

代码示例：

/* 方法1: Flexbox（推荐） */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 方法2: Grid（推荐） */
.grid-center {
    display: grid;
    place-items: center;
}

/* 方法3: 绝对定位 + transform */
.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 方法4: 绝对定位 + 负margin（需已知尺寸） */
.absolute-center-known {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 100px;
    margin-left: -100px;
    margin-top: -50px;
}

/* 方法5: margin auto（在flex/grid中） */
.flex-child {
    margin: auto;
}

/* 垂直居中（行内元素） */
.inline-center {
    line-height: 200px;
    text-align: center;
}

补充说明：

  • 通用场景推荐 Flexbox 或 Grid
  • 已知尺寸可用绝对定位+负margin
  • 避免使用 vertical-align: middle

32. 如何实现元素的水平垂直居中

问题：如何实现元素的水平垂直居中

答案： 核心回答：常用方法有 Flexbox、Grid、绝对定位 + transform。

代码示例：

/* Flexbox 方法（推荐） */
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Grid 方法（推荐） */
.parent {
    display: grid;
    place-items: center;
}

/* 绝对定位 + transform */
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

33. 元素水平垂直居中的方法有哪些？

问题：元素水平垂直居中的方法有哪些？

答案： 核心回答：主要方法包括 Flexbox、Grid、绝对定位、负margin、line-height 等。

代码示例：

/* 1. Flexbox */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. Grid */
.grid-center {
    display: grid;
    place-items: center;
}

/* 3. 绝对定位 + transform */
.pos-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 4. 绝对定位 + 负margin（需知道元素尺寸） */
.pos-center-known {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 50px;
    margin-left: -50px;
    margin-top: -25px;
}

/* 5. grid + margin auto */
.grid-margins {
    display: grid;
}
.child {
    margin: auto;
}

/* 6. 行内元素垂直居中 */
.line-center {
    line-height: 200px;
    text-align: center;
}
.line-center span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

34. 实现垂直水平居中的方法

问题：实现垂直水平居中的方法

答案： 核心回答：推荐使用 Flexbox 或 Grid 实现居中。

代码示例：

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

/* Grid */
.grid-center {
    display: grid;
    place-items: center;
}

/* 绝对定位 + transform */
.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

35. 垂直居中的多种实现方案？

问题：垂直居中的多种实现方案？

答案： 核心回答：垂直居中包括 Flexbox、Grid、绝对定位、table-cell、line-height 等方法。

代码示例：

/* 1. Flexbox */
.flex-vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 2. Grid */
.grid-vertical {
    display: grid;
    align-content: center;
}

/* 3. 绝对定位 */
.absolute-vertical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* 4. table-cell */
.table-vertical {
    display: table-cell;
    vertical-align: middle;
}

/* 5. line-height（单行文本） */
.single-line {
    line-height: 200px;
}

/* 6. padding（已知高度） */
.padding-vertical {
    padding-top: 50px;
    padding-bottom: 50px;
}

36. 如何实现元素的垂直居中？

问题：如何实现元素的垂直居中？

答案： 核心回答：Flexbox 和 Grid 是最简洁的垂直居中方案。

代码示例：

/* Flexbox */
.vertical-center {
    display: flex;
    align-items: center;
}

/* Grid */
.vertical-center {
    display: grid;
    align-items: center;
}

/* 绝对定位 */
.vertical-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* table-cell */
.vertical-center {
    display: table-cell;
    vertical-align: middle;
}

37. position 属性

问题：position 属性

答案： 核心回答：position 属性控制元素的定位类型，包括 static、relative、absolute、fixed、sticky。

详细说明：

值说明定位上下文
static默认，正常文档流无
relative相对自身位置自身
absolute绝对定位最近的定位祖先
fixed固定定位视口
sticky粘性定位滚动容器

代码示例：

/* static - 默认定位 */
.static {
    position: static;
}

/* relative - 相对定位，相对于自身偏移 */
.relative {
    position: relative;
    top: 20px;
    left: 10px;
}

/* absolute - 绝对定位，相对于定位祖先 */
.parent {
    position: relative;
}
.absolute {
    position: absolute;
    top: 0;
    right: 0;
}

/* fixed - 固定定位，相对于视口 */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* sticky - 粘性定位 */
.sticky-nav {
    position: sticky;
    top: 0;
}

补充说明：

  • absolute 元素会脱离文档流
  • fixed 元素相对于视口定位，不随滚动滚动
  • sticky 需要设置 top/left 等阈值才生效

38. position 的 relative、absolute、fixed 定位基准

问题：position 的 relative、absolute、fixed 定位基准

答案： 核心回答：relative 相对于自身，absolute 相对于最近的定位祖先，fixed 相对于视口。

详细说明：

值定位基准是否脱离文档流
relative自身原位置否
absolute最近的定位祖先是
fixed视口是
sticky滚动容器否（达到条件时）

代码示例：

/* relative - 相对于自身原位置 */
.relative {
    position: relative;
    top: 10px;   /* 向下偏移10px */
    left: 20px;  /* 向右偏移20px */
}

/* absolute - 需要祖先有 position */
.container {
    position: relative; /* 祖先设置定位 */
}
.tooltip {
    position: absolute;
    top: 0;
    right: 0;     /* 相对于container右上角 */
}

/* fixed - 始终相对于视口 */
.fixed-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

补充说明：

  • absolute 元素如果没有定位祖先，则相对于初始包含块（html）
  • fixed 在移动端有特殊处理（通常相对于布局视口）

39. 浮动与清除浮动

问题：浮动与清除浮动

答案： 核心回答：浮动使元素向左或向右移动，清除浮动解决父元素高度塌陷问题。

详细说明：

浮动属性：

float: left | right | none;

清除浮动方法：

方法代码说明
额外标签法<div style="clear: both"></div>不推荐
overflowoverflow: hidden/autoBFC 原理
::after 伪元素clearfix::after最佳实践
clear 属性clear: both单独使用

代码示例：

/* 浮动 */
.left-box {
    float: left;
    width: 200px;
}
.right-box {
    float: right;
    width: 200px;
}

/* 清除浮动 - ::after 伪元素法（推荐） */
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

/* 清除浮动 - overflow BFC 法 */
.clearfix {
    overflow: hidden; /* 或 auto */
}

/* HTML 结构 */
<div class="parent clearfix">
    <div class="float-left">左浮动</div>
    <div class="float-right">右浮动</div>
</div>

补充说明：

  • 现代布局推荐使用 Flexbox/Grid
  • 浮动会脱离文档流，导致父元素高度塌陷
  • ::after 伪元素清除浮动是标准做法

40. 请解释 CSS 中的浮动和清除浮动

问题：请解释 CSS 中的浮动和清除浮动

答案： 核心回答：浮动使元素向左/右移动并脱离文档流，清除浮动解决父容器高度塌陷。

代码示例：

/* 浮动 */
.left { float: left; }
.right { float: right; }

/* 清除浮动 - 伪元素法（推荐） */
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

41. 清除浮动的必要性及常用方法（至少 3 种）

问题：清除浮动的必要性及常用方法（至少 3 种）

答案： 核心回答：清除浮动解决父元素高度塌陷问题，常用方法有 overflow、clearfix、grid/flex。

代码示例：

/* 方法1: overflow */
.parent {
    overflow: hidden; /* 创建 BFC */
}

/* 方法2: ::after 伪元素（推荐） */
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

/* 方法3: 使用 flex/gird */
.flex-parent {
    display: flex;
}

/* 方法4: 使用 grid */
.grid-parent {
    display: grid;
}

42. BFC 触发条件

问题：BFC 触发条件

答案： 核心回答：BFC（块级格式化上下文）是独立的渲染区域，html 根元素、overflow、flex/grid、position 等可触发。

详细说明：

触发条件示例
根元素<html>
overflow !== visibleoverflow: hidden/auto/scroll
float !== nonefloat: left/right
position !== staticposition: absolute/fixed
display: inline-blockdisplay: inline-block
display: table-*/flex/griddisplay: flex/grid/table
contain: layout/paintcontain: layout
column-span: allcolumn-span: all

代码示例：

/* overflow 触发 BFC */
.bfc {
    overflow: hidden;
}

/* flex 容器是 BFC */
.flex {
    display: flex;
}

/* grid 容器是 BFC */
.grid {
    display: grid;
}

/* 绝对定位元素是 BFC */
.absolute {
    position: absolute;
}

/* inline-block 是 BFC */
.inline-block {
    display: inline-block;
}

补充说明：

  • BFC 内部元素与外部元素隔离
  • BFC 不会与浮动元素重叠
  • BFC 可用于清除浮动、阻止边距合并

43. BFC（块级格式化上下文）的触发条件？

问题：BFC（块级格式化上下文）的触发条件？

答案： 核心回答：overflow、float、position、display 等属性可触发 BFC。

代码示例：

/* overflow */
.bfc-overflow {
    overflow: hidden;
}

/* float */
.bfc-float {
    float: left;
}

/* position */
.bfc-position {
    position: absolute;
}

/* display */
.bfc-display {
    display: inline-block;
}

44. BFC（块级格式化上下文）的概念与作用

问题：BFC（块级格式化上下文）的概念与作用

答案： 核心回答：BFC 是独立的渲染区域，内部布局与外部隔离，用于解决浮动、边距合并、清除浮动等问题。

详细说明：

BFC 特性：

  1. 内部 Box 垂直排列
  2. 同一 BFC 的元素外边距会合并
  3. BFC 不与浮动元素重叠
  4. 计算 BFC 高度时包含浮动元素

作用：

作用说明
清除浮动父元素变成 BFC 后包含浮动子元素
阻止外边距合并不同 BFC 的元素边距不合并
自适应布局BFC 区域不与浮动重叠

代码示例：

/* 清除浮动 - BFC */
.parent {
    overflow: hidden; /* 触发 BFC */
}

/* 自适应两栏布局 */
.container {
    overflow: hidden;
}
.sidebar {
    float: left;
    width: 200px;
}
.main {
    overflow: hidden; /* 不与浮动重叠 */
}

/* 阻止外边距合并 */
.wrapper {
    overflow: hidden; /* 创建新的 BFC */
}

45. 什么是 BFC？它有什么作用？

问题：什么是 BFC？它有什么作用？

答案： 核心回答：BFC 是块级格式化上下文，是页面上的独立渲染区域。

作用：

  • 清除浮动
  • 阻止外边距合并
  • 自适应布局

代码示例：

/* 清除浮动 */
.bfc {
    overflow: hidden;
}

46. display 属性值

问题：display 属性值

答案： 核心回答：display 属性控制元素的显示类型，包括 block、inline、inline-block、flex、grid、none 等。

详细说明：

值说明
block块级元素，独占一行
inline行内元素，不独占一行
inline-block行内块，可设宽高
flex弹性盒容器
inline-flex行内弹性盒
grid网格容器
inline-grid行内网格
none不显示，不占空间
table表格
list-item列表项

代码示例：

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }
.none { display: none; }
.table { display: table; }

补充说明：

  • display: none 不占空间，visibility: hidden 仍占空间
  • inline-block 会产生空白间隙

47. display 属性的常用值及其作用（如 inline、block、inline-block）

问题：display 属性的常用值及其作用（如 inline、block、inline-block）

答案： 核心回答：display 控制元素显示类型，block 独占一行，inline 不独占，inline-block 兼具两者特点。

代码示例：

/* block - 块级元素 */
.block {
    display: block;
    width: 100%;
    margin: 10px 0;
}

/* inline - 行内元素 */
.inline {
    display: inline;
    margin: 0 10px;
}

/* inline-block - 行内块 */
.inline-block {
    display: inline-block;
    width: 100px;
    height: 50px;
    vertical-align: middle;
}

48. 行内与块级元素差异

问题：行内元素与块级元素的差异？

答案： 核心回答：块级元素独占一行、可设宽高；行内元素不独占一行、宽高由内容决定。

代码示例：

/* 块级元素 */
.block {
    display: block;
    width: 200px;
    height: 100px;
    margin: 10px 0; /* 垂直外边距生效 */
}

/* 行内元素 */
.inline {
    display: inline;
    /* width/height 设置无效 */
    /* 垂直 margin 设置无效 */
}

/* 行内块 */
.inline-block {
    display: inline-block;
    width: 100px; /* 有效 */
    height: 50px; /* 有效 */
    vertical-align: top;
}

49. 行内元素与块级元素的差异？

问题：行内元素与块级元素的差异？

答案： 核心回答：块级元素独占一行，默认 width 100%；行内元素不独占一行，宽高由内容决定。

表格对比：

特征块级元素行内元素
换行独占一行不独占一行
宽高可设宽高不可设（inline-block 除外）
margin上下生效上下不生效
padding上下生效但不占空间上下生效
包含可包含块级/行内只能包含行内（HTML5除外）

50. 重置 CSS 原因及方法

问题：重置 CSS 原因及方法

答案： 核心回答：不同浏览器有默认样式差异，重置 CSS 统一基础样式。

方法：

  • Normalize.css
  • 自定义 reset
  • CSS Reset

代码示例：

/* 简化的 CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

img {
    max-width: 100%;
    display: block;
}

button, input {
    font-family: inherit;
}

51. 重置 CSS 样式的原因及处理方法

问题：重置 CSS 样式的原因及处理方法

答案： 核心回答：浏览器默认样式不一致，重置后统一基础样式。

代码示例：

/* 使用 Normalize.css */
<link rel="stylesheet" href="normalize.css">

/* 或自定义 reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

52. display: none vs visibility: hidden

问题：display: none vs visibility: hidden

答案： 核心回答：display: none 不占空间、触发回流，visibility: hidden 占空间、只触发重绘。

详细说明：

特征display: nonevisibility: hidden
空间不占空间占据空间
回流/重绘触发回流触发重绘
事件不触发仍可触发（如 hover）
子元素全部隐藏可通过 visibility: visible 显示

代码示例：

.none {
    display: none; /* 不占位，脱离文档流 */
}

.hidden {
    visibility: hidden; /* 占位，仍占据空间 */
}

.child-visible {
    visibility: visible; /* 可在隐藏父元素中显示 */
}

补充说明：

  • display: none 的子元素也无法通过 visibility: visible 显示
  • opacity: 0 类似于 visibility: hidden，但不阻塞事件

53. Chrome 显示小字

问题：Chrome 显示小字

答案： 核心回答：Chrome 默认最小字号 12px，可用 CSS -webkit-text-size-adjust 或 transform 缩放。

代码示例：

/* 方法1: -webkit-text-size-adjust */
html {
    -webkit-text-size-adjust: 100%;
}

/* 方法2: 使用 transform 缩放 */
.small-text {
    font-size: 10px;
    -webkit-transform: scale(1);
    transform-origin: left center;
}

/* 方法3: 使用图片或 SVG */
.icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('icon.svg');
}

54. 如何让 Chrome 浏览器显示小于 12px 的文字

问题：如何让 Chrome 浏览器显示小于 12px 的文字

答案： 核心回答：Chrome 有最小字号限制，可用 transform 缩放或调整 viewport 解决。

代码示例：

/* 使用 transform 缩放 */
.text-10px {
    font-size: 10px;
    -webkit-transform: scale(1);
    transform-origin: left top;
}

/* 使用 -webkit-text-size-adjust */
.text-auto {
    -webkit-text-size-adjust: auto;
}

55. CSS 变量使用

问题：CSS 变量使用

答案： 核心回答：CSS 变量以 -- 开头声明，用 var() 函数使用，便于主题和样式复用。

详细说明：

操作语法
声明--variable-name: value;
使用var(--variable-name, fallback)
作用域当前元素及其子元素

代码示例：

/* 定义变量 */
:root {
    --primary-color: #3498db;
    --spacing: 20px;
    --border-radius: 8px;
    --font-size-base: 16px;
}

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

/* 带默认值 */
.element {
    color: var(--text-color, #333);
}

/* 修改变量（JS） */
element.style.setProperty('--primary-color', 'red');

/* 响应式变量 */
@media (max-width: 768px) {
    :root {
        --spacing: 10px;
    }
}

补充说明：

  • 变量可以继承和层叠
  • 可以用 JS 动态修改实现主题切换
  • CSS 变量区分大小写

56. CSS 变量（自定义属性）的使用

问题：CSS 变量（自定义属性）的使用

答案： 核心回答：CSS 变量用 -- 前缀定义，用 var() 调用，便于复用和主题管理。

代码示例：

:root {
    --theme-color: #3498db;
    --border-radius: 4px;
}

.btn {
    background: var(--theme-color);
    border-radius: var(--border-radius);
}

57. CSS3 新增伪类

问题：CSS3 新增伪类

答案： 核心回答：CSS3 新增了 :nth-child、:first-of-type、:empty、:not()、:target 等伪类。

代码示例：

/* 结构伪类 */
:nth-child(2n) { }       /* 偶数 */
:nth-child(2n+1) { }     /* 奇数 */
:nth-of-type(2) { }      /* 同类型第二个 */
:first-of-type { }       /* 同类型第一个 */
:last-of-type { }        /* 同类型最后一个 */
:only-child { }          /* 唯一的子元素 */
:empty { }               /* 空元素 */

/* 否定伪类 */
:not(.active) { }         /* 不是 active 类 */

/* 目标伪类 */
:target { }               /* 被锚点指向 */

/* 状态伪类 */
:checked { }             /* 被选中的 checkbox/radio */
:focus-within { }         /* 聚焦在内部元素上时 */
:indeterminate { }       /* 不确定状态 */

/* 表单伪类 */
:valid { }               /* 有效输入 */
:invalid { }             /* 无效输入 */
:in-range { }            /* 在范围内 */
:out-of-range { }        /* 在范围外 */
:optional { }            /* 可选的 */
:required { }           /* 必填的 */
:read-only { }           /* 只读 */
:read-write { }          /* 可读写 */

58. CSS3 新增了哪些伪类？如何使用？

问题：CSS3 新增了哪些伪类？如何使用？

答案： 核心回答：CSS3 新增了 :nth-child、:not、:first-of-type、:empty、:checked 等伪类。

代码示例：

/* :nth-child */
li:nth-child(3) { }      /* 第3个 */
li:nth-child(odd) { }   /* 奇数 */
li:nth-child(3n+1) { }  /* 3n+1 */

/* :not */
:not(p) { }              /* 非 p 元素 */
:not(.hidden) { }       /* 没有 hidden 类 */

/* :first-of-type */
p:first-of-type { }      /* 同级第一个 p */

/* :empty */
div:empty { }            /* 空 div */

/* :checked */
input:checked + label { } /* 选中状态 */

59. 三角形创建

问题：如何用 CSS 创建一个三角形？

答案： 核心回答：利用 border 属性，将元素宽度高度设为 0，通过边框拼接形成三角形。

代码示例：

/* 向上箭头 */
.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

/* 向下箭头 */
.triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

/* 向左箭头 */
.triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 100px solid red;
}

/* 向右箭头 */
.triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid red;
}

/* 应用示例 - 下拉框箭头 */
.dropdown::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    margin-left: 5px;
}

补充说明：

  • 三角形的颜色由底边 border-color 决定
  • 透明边框用 transparent
  • 边框宽度决定三角形大小

60. CSS Sprites 的原理及涉及的属性

问题：CSS Sprites 的原理及涉及的属性

答案： 核心回答：CSS Sprites 将多张小图合并到一张大图，通过 background-position 显示对应部分，减少 HTTP 请求。

代码示例：

/* 合并后的雪碧图 */
.icon {
    background-image: url('sprite.png');
    background-repeat: no-repeat;
    display: inline-block;
}

/* 不同图标使用不同位置 */
.icon-home {
    background-position: 0 0;
    width: 24px;
    height: 24px;
}

.icon-settings {
    background-position: -24px 0;
    width: 24px;
    height: 24px;
}

.icon-user {
    background-position: -48px 0;
    width: 24px;
    height: 24px;
}

/* 按钮图标示例 */
.btn {
    background: url('sprite.png') -60px 0 no-repeat;
    padding-left: 30px;
}

补充说明：

  • 减少 HTTP 请求数量
  • 合并图片有尺寸限制
  • 修改图标需要重新生成雪碧图
  • 现代方案可用 SVG Sprite 或 Icon Font

61. @import 指令的缺陷

问题：@import 指令的缺陷

答案： 核心回答：@import 会增加额外请求，且阻塞并行下载，导致页面加载变慢。

详细说明：

缺陷说明
阻塞并行下载@import 后的资源必须等前面下载完才能下载
额外请求每次 @import 都可能产生新请求
维护困难嵌套层级多时难以维护

代码示例：

/* ❌ 不推荐 - 阻塞加载 */
@import url('base.css');
@import url('layout.css');
@import url('theme.css');

/* ✅ 推荐 - link 并行加载 */
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="theme.css">

补充说明：

  • @import 最好只用于动态加载场景
  • 合并 CSS 文件减少请求数
  • 使用构建工具处理 CSS

62. CSS 属性简写规则

问题：CSS 属性简写规则

答案： 核心回答：CSS 简写会按顺时针方向赋值，缺失值使用默认值，可能覆盖单独设置的属性。

代码示例：

/* margin 简写 - 上右下左 */
margin: 10px;              /* 四边相同 */
margin: 10px 20px;         /* 上下 10px，左右 20px */
margin: 10px 20px 30px;    /* 上 10px，左右 20px，下 30px */
margin: 10px 20px 30px 40px; /* 上右下左 */

/* padding 同理 */
padding: 10px 20px;

/* border 简写 */
border: 1px solid #333;   /* 宽度、样式、颜色 */
border-width: 1px;
border-style: solid;
border-color: #333;

/* font 简写 */
font: 16px/1.5 Arial, sans-serif;
/* 完整: font-style font-variant font-weight font-size/line-height font-family */

/* background 简写 */
background: #f5f5f5 url('bg.jpg') no-repeat center center;

补充说明：

  • 简写会重置未指定的子属性
  • padding: 10px 会将 padding-top/padding-bottom 设置为 10px
  • 使用简写前确保了解完整属性

63. CSS 属性简写（如 padding）

问题：CSS 属性简写（如 padding）

答案： 核心回答：padding/margin 简写按上右下左顺时针赋值。

代码示例：

padding: 10px;           /* 四边 */
padding: 10px 20px;      /* 上下、左右 */
padding: 10px 20px 30px; /* 上、左右、下 */
padding: 10px 20px 30px 40px; /* 上、右、下、左 */

64. 可继承属性

问题：具有继承特性的 CSS 属性（至少 5 个）

答案： 核心回答：文字相关属性可继承，如 font-、color、text-、visibility 等。

详细说明：

属性说明
font-family字体
font-size字号
font-weight字重
font-style字体样式
color颜色
text-align文本对齐
text-indent文本缩进
text-transform文本转换
letter-spacing字间距
line-height行高
visibility可见性
cursor鼠标样式

代码示例：

/* 父元素设置 */
.parent {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

/* 子元素自动继承 */
.child {
    /* 继承自 parent: Arial, 16px, #333, 1.5 */
}

/* 强制继承 */
.force-inherit {
    font-size: inherit;  /* 显式继承 */
    color: inherit;
}

补充说明：

  • 使用 inherit 强制继承
  • 使用 initial 设为默认值
  • 使用 unset 设为初始值或继承值

65. 具有继承特性的 CSS 属性（至少 5 个）

问题：具有继承特性的 CSS 属性（至少 5 个）

答案： 核心回答：可继承属性包括 font 系列、color、visibility、text-align 等。

代码示例：

.inheritable {
    font-family: Arial;
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 1.5;
    visibility: visible;
}

66. margin 与 padding 使用场景

问题：Margin 和 padding 在什么场合下使用

答案： 核心回答：padding 用于元素内部空间（边框内），margin 用于元素之间空间（边框外）。

代码示例：

/* padding - 内部空间 */
.button {
    padding: 15px 20px; /* 按钮文字与边框的距离 */
    background: #3498db;
    border-radius: 4px;
}

/* margin - 外部空间 */
.paragraph {
    margin-bottom: 20px; /* 段落之间的距离 */
}

/* 特殊用法 */
.box {
    /* padding 调整背景覆盖范围 */
    padding: 20px;
    
    /* margin 居中（auto） */
    margin: 0 auto;
    
    /* 负 margin */
    margin-top: -10px; /* 向上偏移 */
}

67. Margin 和 padding 在什么场合下使用

问题：Margin 和 padding 在什么场合下使用

答案： 核心回答：padding 是元素内部空间，margin 是元素之间的空间。

代码示例：

/* padding 场合 - 增加可点击区域 */
.button {
    padding: 12px 24px;
}

/* margin 场合 - 元素间距 */
.card {
    margin-bottom: 20px;
}

/* 文字使用 padding */
.text {
    padding-left: 20px;
}

68. px vs em

问题：px 与 em 的区别

答案： 核心回答：px 是绝对单位，em 是相对单位（相对于父元素字体大小）。

详细说明：

单位特点适用场景
px固定值，不随环境变化精确设计稿还原
em相对于父元素字体大小可缩放组件
rem相对于根元素字体大小响应式布局

代码示例：

/* px - 固定大小 */
.header {
    font-size: 16px;
    padding: 10px;
}

/* em - 相对大小 */
.container {
    font-size: 16px;
}
.text {
    font-size: 1.5em;  /* = 24px (相对于 container) */
}
.section {
    font-size: 0.875em; /* = 14px */
}

/* rem - 相对于根元素 */
html {
    font-size: 16px;
}
.box {
    font-size: 1rem; /* = 16px */
}

补充说明：

  • 响应式开发推荐使用 rem 或 em
  • 可以用 clamp() 实现响应式字体

69. px 与 em 的区别

问题：px 与 em 的区别

答案： 核心回答：px 是固定像素值，em 是相对父元素字号的倍数。

代码示例：

.parent {
    font-size: 20px;
}
.child {
    font-size: 1.5em; /* 30px */
}

70. 图片导出格式选择

问题：图片导出格式的选择依据（如 PNG-8、PNG-24、JPG）

答案： 核心回答：PNG 无损适合图标，JPG 有损适合照片，GIF 适合动画，WebP 综合优秀。

代码示例：

<!-- 照片用 JPG -->
<img src="photo.jpg" alt="风景照">

<!-- 图标用 PNG-8 或 SVG -->
<img src="icon.png" alt="设置图标">

<!-- 透明图用 PNG-24 -->
<img src="logo.png" alt="公司logo">

<!-- 动画用 GIF -->
<img src="loading.gif" alt="加载动画">

<!-- 现代格式用 WebP -->
<img src="image.webp" alt="WebP图片">

71. div+css 布局对比 table 布局的优势

问题：div+css 布局对比 table 布局的优势

答案： 核心回答：div+css 更灵活、性能更好、语义更清晰、利于 SEO。

详细说明：

方面div+csstable
加载逐步渲染全部加载完才显示
语义语义不明确用于数据展示
布局灵活多样固定表格结构
样式CSS 控制HTML 属性控制
重排局部可能全表

代码示例：

/* div+css 布局 */
.layout {
    display: flex;
}
.sidebar {
    flex: 0 0 200px;
}
.main {
    flex: 1;
}

/* 响应式 */
@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }
}

补充说明：

  • table 用于展示表格数据
  • div+css 通过 CSS 实现各种复杂布局

72. CSS 如何进行圣杯布局、双飞翼布局等？

问题：CSS 如何进行圣杯布局、双飞翼布局等？

答案： 核心回答：使用 Flexbox 或 Grid 可以轻松实现圣杯布局和双飞翼布局。

代码示例：

/* Flexbox 圣杯布局 */
.holy-grail {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.holy-grail .header,
.holy-grail .footer {
    flex: 0 0 60px;
}
.holy-grail .body {
    display: flex;
    flex: 1;
}
.holy-grail .main {
    flex: 1;
    order: 2;
}
.holy-grail .nav {
    flex: 0 0 200px;
    order: 1;
}
.holy-grail .aside {
    flex: 0 0 200px;
    order: 3;
}

/* Grid 实现 */
.page {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

七、响应式设计（媒体查询）

73. 响应式设计实现

问题：如何实现移动端适配

答案： 核心回答：通过 viewport 设置、媒体查询、弹性布局和响应式单位实现移动端适配。

代码示例：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 媒体查询 */
.container {
    padding: 15px;
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

/* 响应式图片 */
img {
    max-width: 100%;
    height: auto;
}

/* 响应式字体 */
html {
    font-size: 16px;
}
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

74. 移动端适配方法

问题：移动端适配方法

答案： 核心回答：使用 viewport、媒体查询、flex/grid、rem/vw 等技术实现移动端适配。

代码示例：

/* viewport */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 媒体查询 */
@media (max-width: 768px) {
    .sidebar {
        display: none;
    }
}

/* rem 单位 */
html {
    font-size: calc(16px + 2vw);
}

75. 移动端适配方法有哪些？

问题：移动端适配方法有哪些？

答案： 核心回答：包括 viewport 设置、媒体查询、Flexbox、Grid、rem/vw 单位、响应式图片等技术。

代码示例：

/* 1. 媒体查询 */
@media (max-width: 768px) { }

/* 2. Flexbox */
display: flex;

/* 3. Grid */
display: grid;

/* 4. rem 单位 */
font-size: 1rem;

/* 5. vw 单位 */
width: 100vw;

76. 响应式设计如何实现？

问题：响应式设计如何实现？

答案： 核心回答：通过 viewport、媒体查询、弹性布局实现响应式设计。

代码示例：

/* viewport */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 媒体查询 */
@media (max-width: 480px) {
    /* 手机 */
}
@media (min-width: 481px) and (max-width: 768px) {
    /* 平板 */
}
@media (min-width: 769px) {
    /* 桌面 */
}

77. 媒体查询的使用

问题：媒体查询的使用

答案： 核心回答：使用 @media 规则根据设备特性应用不同样式。

代码示例：

/* 基本语法 */
@media screen and (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

/* 范围查询 */
@media (min-width: 320px) and (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

/* 方向查询 */
@media (orientation: landscape) {
    .banner {
        height: 30vh;
    }
}

/* 设备像素比 */
@media (-webkit-min-device-pixel-ratio: 2) {
    .retina-logo {
        background-image: url('logo@2x.png');
    }
}

/* 移动优先 */
.container {
    width: 100%;
}
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

八、盒模型与布局

78. CSS 盒模型组成

问题：CSS 盒模型组成

答案： 核心回答：CSS 盒模型由 content、padding、border、margin 四部分组成。

详细说明：

┌─────────────────────────────┐
│          margin              │
│  ┌───────────────────────┐   │
│  │       border          │   │
│  │  ┌─────────────────┐  │   │
│  │  │     padding      │  │   │
│  │  │  ┌───────────┐  │  │   │
│  │  │  │  content  │  │  │   │
│  │  │  └───────────┘  │  │   │
│  │  └─────────────────┘  │   │
│  └───────────────────────┘   │
└─────────────────────────────┘

代码示例：

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
}

/* content-box (默认) - width 包含 content */
.content-box {
    box-sizing: content-box; /* 默认 */
    width: 200px; /* content 宽度 */
    /* 实际占用 = 200 + 40 + 4 + 20 = 264px */
}

/* border-box - width 包含 content + padding + border */
.border-box {
    box-sizing: border-box;
    width: 200px; /* content + padding + border 总宽度 */
    padding: 20px;
    border: 2px solid #333;
    /* content 宽度 = 200 - 40 - 4 = 156px */
}

补充说明：

  • box-sizing: border-box 是推荐做法
  • 外边距合并只在垂直方向发生

79. Border-box 与 content-box 的区别是什么？

问题：Border-box 与 content-box 的区别是什么？

答案： 核心回答：content-box 的 width 只是内容宽，border-box 的 width 包含 content+padding+border。

代码示例：

/* content-box（默认） */
.content-box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 2px solid #333;
    /* 总宽度 = 200 + 40 + 4 = 244px */
}

/* border-box（推荐） */
.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 2px solid #333;
    /* content 宽度 = 200 - 40 - 4 = 156px */
}

80. 盒模型计算方式

问题：盒模型计算方式

答案： 核心回答：盒模型总宽度 = width + padding + border + margin。

代码示例：

.box {
    width: 200px;
    padding: 10px 20px;
    border: 2px solid #333;
    margin: 10px;
}

/* 总宽度计算 */
.content = 200px
padding = 10px + 20px = 40px
border = 2px + 2px = 4px
margin = 20px (左右各10px)
总宽度 = 200 + 40 + 4 + 20 = 264px

81. box-sizing 属性

问题：box-sizing 属性

答案： 核心回答：box-sizing 控制 width/height 的计算方式，包括 content-box 和 border-box。

代码示例：

/* 默认 - width 只包含内容 */
box-sizing: content-box;

/* 推荐 - width 包含 padding 和 border */
box-sizing: border-box;

/* 全局设置 */
*, *::before, *::after {
    box-sizing: border-box;
}

82. CSS 盒模型包含哪些部分

问题：CSS 盒模型包含哪些部分

答案： 核心回答：盒模型由 content、padding、border、margin 四部分组成。

详细说明：

部分说明
content内容区域
padding内边距
border边框
margin外边距

83. 解释 CSS 盒模型

问题：解释 CSS 盒模型

答案： 核心回答：每个 HTML 元素都是一个盒子，由 content、padding、border、margin 四层组成。

代码示例：

.box {
    width: 200px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
}

84. 盒模型的构成及相关计算方式

问题：盒模型的构成及相关计算方式

答案： 核心回答：盒模型 = content + padding + border + margin，box-sizing 决定 width 计算方式。

代码示例：

/* 标准盒模型 */
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 2px solid #333;
/* 实际宽度 = 200 + 40 + 4 = 244px */

/* IE 盒模型 */
box-sizing: border-box;
width: 200px;
/* 实际宽度 = 200px = content + padding + border */

九、综合应用

85. 实现响应式布局的关键点

问题：实现响应式布局的关键点

答案： 核心回答：关键点包括 viewport 设置、媒体查询、弹性布局、响应式单位。

代码示例：

/* 1. viewport */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 2. 媒体查询断点 */
@media (max-width: 768px) { }
@media (min-width: 769px) and (max-width: 1024px) { }
@media (min-width: 1025px) { }

/* 3. 弹性布局 */
display: flex;
display: grid;

/* 4. 响应式单位 */
width: 100%;
max-width: 1200px;
font-size: clamp(14px, 2vw, 18px);
avatar
文章
阅读
粉丝