前端面试秘籍：CSS那些你不得不懂的“潜规则”(三)

🚀 前端面试秘籍：CSS那些你不得不懂的"潜规则"(三)

今天咱们就来一次CSS的"庖丁解牛"，用大白话把那些面试常客的难点、痛点，一条条、一桩桩给你捋清楚！准备好了没？咱们这就启程，一起把CSS的"老底"给掀了！

7. 🛠️ CSS预处理器：让你的CSS"飞"起来

你有没有觉得写CSS就像在写流水账？变量不能用，函数不能写，重复的代码一大堆？这时候，CSS预处理器就来拯救你了！它就像给CSS加了一个"外挂"，让你能用更强大的语法来写CSS，然后再编译成浏览器能识别的普通CSS。就像你用高级编程语言写代码，然后编译成机器码一样。

7.1 🌟 Sass/SCSS：CSS界的"瑞士军刀"

Sass（Syntactically Awesome Style Sheets）是最成熟、最流行的CSS预处理器之一。它有两种语法：Sass（老语法，类似Ruby）和SCSS（新语法，完全兼容CSS语法）。我们通常使用的是SCSS。

主要特性：

变量 (Variables)：可以定义颜色、字体大小等变量，方便统一管理和修改。
嵌套 (Nesting)：可以将CSS选择器嵌套在里面，减少重复，使结构更清晰。
混合 (Mixins)：可以定义可重用的CSS代码块，避免重复编写。
继承 (Inheritance)：可以继承其他选择器的样式。
函数 (Functions)：可以自定义函数来处理颜色、数值等。

7.2 💡 Less：轻量级的"小助手"

Less（Leaner Style Sheets）是另一个流行的CSS预处理器，它基于JavaScript，语法和Sass类似，但更轻量级，学习曲线更平缓。

主要特性：

变量 (Variables)
混合 (Mixins)
嵌套 (Nesting)
函数 (Functions)

7.3 🎨 Stylus：自由奔放的"艺术家"

Stylus是一个富有表现力、灵活的CSS预处理器，它由Node.js开发，语法非常灵活，你可以选择是否使用大括号、分号和冒号。

主要特性：

变量 (Variables)
混合 (Mixins)
嵌套 (Nesting)
函数 (Functions)
可选语法：可以写成类似Python的缩进风格，也可以写成传统CSS风格。

为什么使用CSS预处理器？

提高开发效率：减少重复代码，提高可维护性。
代码结构清晰：通过嵌套等方式，让CSS结构更清晰。
易于维护：修改变量即可全局更新样式。
更强大的功能：变量、混合、函数等。

scss 复制代码

// 定义变量
$primary-color: #3498db;
$font-size-base: 16px;

// 定义混合
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.button {
    background-color: $primary-color;
    color: white;
    padding: 10px 20px;
    font-size: $font-size-base;
    @include border-radius(5px); // 使用混合

    &:hover { // 嵌套
        background-color: darken($primary-color, 10%); // 使用函数
    }
}

代码解释：

使用$符号定义变量，方便统一管理颜色和字体大小。
使用@mixin定义了一个border-radius的混合，可以重复使用。
使用&符号进行嵌套，表示hover状态的样式。
使用darken()函数来调整颜色，让hover状态的背景色变暗。

CSS预处理器工作流程图

8. 💥 重绘和重排：前端性能的"隐形杀手"

重绘（Repaint）和重排（Reflow/Layout）是浏览器渲染页面的两个重要步骤，也是前端性能优化的关键点。它们就像是舞台剧的"幕后工作"，虽然观众看不到，但却直接影响着演出的流畅度。如果"幕后工作"做得不好，就会导致页面卡顿、闪烁，用户体验直线下降。

8.1 🎭 重绘 vs 重排：谁更"耗时"？

重绘 (Repaint)：当元素的外观发生改变，但布局没有改变时，浏览器会重新绘制元素。比如改变元素的颜色、背景色、阴影等。这就像演员换了一套衣服，但站位没变。
重排 (Reflow/Layout)：当元素的几何属性（位置、大小等）发生改变，或者页面布局发生变化时，浏览器会重新计算元素的几何属性，并重新布局页面。这就像演员不仅换了衣服，还改变了站位，甚至舞台上的道具都重新摆放了。

重排一定会导致重绘，但重绘不一定会导致重排。

谁更耗时？

重排比重绘更耗时，因为它需要重新计算整个或部分文档的布局，涉及到更多的计算量。就像重新摆放舞台道具比演员换衣服要复杂得多。

8.2 ⚡ 触发重排和重绘的"罪魁祸首"

很多看似简单的操作，都可能触发重排和重绘：

改变DOM元素的几何属性 ：width、height、padding、margin、border、left、top等。
改变DOM树结构：添加、删除、移动DOM节点。
改变元素内容：文本内容或图片大小改变。
改变字体 ：font-size、font-family等。
激活CSS伪类 ：:hover等。
查询某些属性 ：offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollLeft等。这些属性需要浏览器立即计算布局，所以会触发重排。
改变窗口大小：浏览器窗口大小改变。

8.3 🚀 优化策略：让你的页面"健步如飞"

批量修改DOM：避免频繁地操作DOM，可以将多次修改合并为一次。例如，先将元素从文档流中移除，修改后再添加回去。
使用CSS3硬件加速 ：对于动画效果，使用transform和opacity等属性，它们会触发GPU加速，只引起重绘，不引起重排。
避免使用table布局 ：table布局在内容改变时，整个表格都需要重新计算，性能开销较大。
避免频繁读取布局属性：将需要读取的布局属性缓存起来，避免重复读取。
脱离文档流 ：对于频繁变化的元素，可以将其设置为position: absolute;或position: fixed;，使其脱离文档流，减少对其他元素的影响。

javascript 复制代码

// 避免频繁操作DOM导致多次重排
const list = document.getElementById('myList');
const data = ['Item 1', 'Item 2', 'Item 3'];

// 错误示范：每次添加都会触发重排
// data.forEach(itemText => {
//     const li = document.createElement('li');
//     li.textContent = itemText;
//     list.appendChild(li);
// });

// 正确示范：使用文档碎片，一次性添加，只触发一次重排
const fragment = document.createDocumentFragment();
data.forEach(itemText => {
    const li = document.createElement('li');
    li.textContent = itemText;
    fragment.appendChild(li);
});
list.appendChild(fragment);

// 避免频繁读取布局属性
const el = document.getElementById('myElement');
// 错误示范：每次读取都会触发重排
// console.log(el.offsetWidth);
// console.log(el.offsetHeight);

// 正确示范：缓存读取结果
const offsetWidth = el.offsetWidth;
const offsetHeight = el.offsetHeight;
console.log(offsetWidth, offsetHeight);

代码解释：

批量修改DOM ：通过document.createDocumentFragment()创建文档碎片，将所有li元素添加到文档碎片中，最后一次性将文档碎片添加到ul中，这样只会触发一次重排。
避免频繁读取布局属性 ：将offsetWidth和offsetHeight的值缓存到变量中，避免每次读取都触发重排。

9. 🤩 Flex布局：你真的"玩转"了吗？

Flexbox，这个CSS布局的"神器"，我们前面已经提到过它在三栏布局和居中布局中的强大能力。但你真的了解它所有的"超能力"吗？Flexbox不仅仅是用来居中和排版的，它能让你对元素的排列、对齐、空间分配拥有前所未有的控制力。就像你拥有了一个可以随意变形的"魔方"，想怎么玩就怎么玩！

9.1 👨‍👩‍👧‍👦 Flex容器属性：掌控"大局"

Flex容器是应用display: flex;或display: inline-flex;的父元素。它有以下常用属性，用来控制子元素（Flex项目）的排列方式：

flex-direction：决定主轴的方向（项目排列方向）。
- row（默认值）：水平方向，从左到右。
- row-reverse：水平方向，从右到左。
- column：垂直方向，从上到下。
- column-reverse：垂直方向，从下到上。
justify-content：定义项目在主轴上的对齐方式。
- flex-start（默认值）：左对齐。
- flex-end：右对齐。
- center：居中。
- space-between：两端对齐，项目之间间隔相等。
- space-around：每个项目两侧的间隔相等。
align-items：定义项目在交叉轴（与主轴垂直的轴）上的对齐方式。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline：项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-wrap：定义项目是否换行。
- nowrap（默认值）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
align-content：定义多根轴线的对齐方式（如果项目有多行）。
- flex-start、flex-end、center、space-between、space-around、stretch。

9.2 👶 Flex项目属性：每个"孩子"的"个性"

Flex项目是Flex容器的子元素。它们也有一些属性，用来控制自身在Flex容器中的表现：

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。
flex：flex-grow, flex-shrink 和 flex-basis的简写。
- flex: 1; 等同于 flex: 1 1 0%; (项目会放大，缩小，并且在分配空间前占据0%的空间)
- flex: auto; 等同于 flex: 1 1 auto; (项目会放大，缩小，并且在分配空间前占据自身内容大小的空间)
- flex: none; 等同于 flex: 0 0 auto; (项目不会放大，不会缩小，并且在分配空间前占据自身内容大小的空间)
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
- auto（默认值）、flex-start、flex-end、center、baseline、stretch。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局</title>
    <style>
        .container {
            display: flex;
            width: 500px;
            height: 200px;
            background-color: #f0f0f0;
            margin-bottom: 20px;

            /* 容器属性示例 */
            justify-content: space-around; /* 主轴项目两端对齐，项目之间间隔相等 */
            align-items: center; /* 交叉轴居中 */
        }

        .item {
            width: 80px;
            height: 80px;
            background-color: lightblue;
            border: 1px solid blue;
            text-align: center;
            line-height: 80px;
            font-weight: bold;
        }

        .item-grow {
            flex-grow: 1; /* 占据剩余空间 */
        }

        .item-shrink {
            width: 150px; /* 初始宽度 */
            flex-shrink: 0; /* 不缩小 */
        }

        .item-align-self {
            align-self: flex-end; /* 覆盖容器的align-items */
        }
    </style>
</head>
<body>
    <h3>Flex容器属性示例：</h3>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <h3>Flex项目属性示例：</h3>
    <div class="container">
        <div class="item">A</div>
        <div class="item item-grow">B (grow:1)</div>
        <div class="item">C</div>
    </div>

    <div class="container" style="width: 300px;">
        <div class="item">D</div>
        <div class="item item-shrink">E (shrink:0)</div>
        <div class="item">F</div>
    </div>

    <div class="container">
        <div class="item">G</div>
        <div class="item item-align-self">H (align-self: flex-end)</div>
        <div class="item">I</div>
    </div>
</body>
</html>

代码解释：

容器属性 ：第一个container展示了justify-content: space-around;和align-items: center;的效果，项目在主轴上均匀分布，在交叉轴上居中。
flex-grow ：第二个container中，item-grow设置了flex-grow: 1;，它会占据所有剩余空间。
flex-shrink ：第三个container宽度较小，item-shrink设置了flex-shrink: 0;，它不会缩小，可能会导致溢出。
align-self ：第四个container中，item-align-self设置了align-self: flex-end;，它会覆盖父容器的align-items，使其自身在交叉轴上底部对齐。

总结

CSS的世界远比你想象的要精彩！从选择器优先级到盒子模型，从BFC到Flex布局，每一个知识点都蕴含着前端布局的"奥秘"。希望通过这篇博客，你对CSS有了更深入的理解，面试时也能更加自信地应对。记住，多敲代码，多实践，你也能成为CSS的"魔法师"！

祝你面试顺利，Offer拿到手软！🎉

参考资料：

MDN Web Docs

💡 面试小贴士

准备代码示例：面试时最好能手写一些简单的CSS代码来演示概念
理解原理：不要只记住怎么用，更要理解为什么这样用
关注兼容性：了解不同浏览器的差异和兼容性问题
性能意识：能够从性能角度分析CSS的使用
实际应用：结合实际项目经验来回答问题

记住，CSS不仅仅是样式，它是前端开发的基石。掌握好这些基础知识，你就能在前端的道路上走得更远！

如果这篇文章对你有帮助，别忘了点赞收藏哦！有任何问题欢迎在评论区讨论～