【css】【面试提问】css经典问题总结

第一章 CSS基础相关提问

1.1 选择器问题

1.1.1 选择器优先级疑问

1. 优先级规则

内联样式 ：直接写在 HTML 标签的 style 属性中的样式，优先级最高。例如：

html 复制代码

<p style="color: red;">这是一段红色文字</p>

这里文字的颜色会被强制设置为红色，因为内联样式的权重是最高的😎。

ID 选择器 ：使用 # 符号定义，权重次之。比如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #myParagraph {
            color: blue;
        }
    </style>
</head>
<body>
    <p id="myParagraph">这是一段蓝色文字</p>
</body>
</html>

这里的 #myParagraph 选择器会应用到对应的 p 标签上，文字会显示为蓝色。

类选择器、属性选择器和伪类选择器：它们的权重相同且低于 ID 选择器。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      .myClass {
            color: green;
        }
    </style>
</head>
<body>
    <p class="myClass">这是一段绿色文字</p>
</body>
</html>

这里的 .myClass 类选择器会将 p 标签内的文字颜色设置为绿色。

元素选择器和伪元素选择器：权重最低。比如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            color: purple;
        }
    </style>
</head>
<body>
    <p>这是一段紫色文字</p>
</body>
</html>

这里的 p 元素选择器会将所有 p 标签内的文字颜色设置为紫色。

2. 计算优先级

可以通过计算不同选择器的数量来确定优先级。例如，一个包含 2 个 ID 选择器、3 个类选择器和 1 个元素选择器的选择器组合，其优先级可以大致表示为 2-3-1，数字越大的部分代表的选择器类型权重越高🤓。

1.1.2 复杂选择器的使用场景和示例

1. 后代选择器

使用场景：当需要选择某个元素内部的所有特定元素时使用。
示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        ul li {
            color: orange;
        }
    </style>
</head>
<body>
    <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
    </ul>
</body>
</html>

这里的 ul li 选择器会将 ul 元素内部的所有 li 元素的文字颜色设置为橙色。

2. 子选择器

使用场景：只选择某个元素的直接子元素。
示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div > p {
            color: pink;
        }
    </style>
</head>
<body>
    <div>
        <p>这是直接子元素</p>
        <span>
            <p>这不是直接子元素</p>
        </span>
    </div>
</body>
</html>

这里的 div > p 选择器只会将 div 的直接子元素 p 的文字颜色设置为粉色。

3. 相邻兄弟选择器

使用场景：选择某个元素后面紧邻的兄弟元素。
示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 + p {
            color: brown;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>这是紧邻的段落</p>
    <p>这不是紧邻的段落</p>
</body>
</html>

这里的 h1 + p 选择器会将 h1 后面紧邻的 p 元素的文字颜色设置为棕色。

1.1.3 选择器的性能比较及优化

1. 性能比较

ID 选择器：性能最好，因为浏览器可以直接通过 ID 快速定位到元素。
类选择器和属性选择器：性能次之，需要遍历元素的类名或属性来匹配。
元素选择器：性能相对较差，因为需要遍历所有元素来匹配。
复杂选择器：如后代选择器、子选择器等，性能最差，因为需要进行多层级的匹配。

2. 优化方法

避免使用通配符选择器 ：* 通配符选择器会匹配所有元素，性能开销很大，尽量避免使用。
减少复杂选择器的嵌套：过多的嵌套会增加匹配的复杂度，降低性能。
优先使用 ID 和类选择器：它们的匹配速度更快，可以提高性能。

1.2 盒模型问题

1.2.1 盒模型各部分的计算方式

1. 内容区（content）

内容区是元素实际显示的内容，如文字、图片等。其宽度和高度由元素的 width 和 height 属性决定。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div>这是内容区</div>
</body>
</html>

这里的 div 元素的内容区宽度为 200px，高度为 100px。

2. 内边距（padding）

内边距是内容区与边框之间的距离，通过 padding 属性设置。可以分别设置上、右、下、左四个方向的内边距，也可以统一设置。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 200px;
            height: 100px;
            padding: 10px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div>这是有内边距的元素</div>
</body>
</html>

这里的 div 元素的内边距为 10px，实际占据的宽度为 200 + 2 * 10 = 220px，高度为 100 + 2 * 10 = 120px。

3. 边框（border）

边框是围绕内容区和内边距的线条，通过 border 属性设置。可以设置边框的宽度、样式和颜色。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 200px;
            height: 100px;
            padding: 10px;
            border: 2px solid black;
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <div>这是有边框的元素</div>
</body>
</html>

这里的 div 元素的边框宽度为 2px，实际占据的宽度为 200 + 2 * 10 + 2 * 2 = 224px，高度为 100 + 2 * 10 + 2 * 2 = 124px。

4. 外边距（margin）

外边距是元素与其他元素之间的距离，通过 margin 属性设置。同样可以分别设置四个方向的外边距，也可以统一设置。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 200px;
            height: 100px;
            padding: 10px;
            border: 2px solid black;
            margin: 20px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div>这是有外边距的元素</div>
</body>
</html>

这里的 div 元素的外边距为 20px，它与其他元素之间会有 20px 的间距。

1.2.2 盒模型的不同类型（content-box、border-box等）及应用场景

1. content-box

特点：这是盒模型的默认类型，元素的 width 和 height 只包含内容区的宽度和高度，不包含内边距、边框和外边距。
应用场景：当需要精确控制内容区的大小时使用。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 200px;
            height: 100px;
            padding: 10px;
            border: 2px solid black;
            box-sizing: content-box;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div>这是 content-box 类型的元素</div>
</body>
</html>

这里的 div 元素的内容区宽度为 200px，高度为 100px，实际占据的宽度和高度需要加上内边距和边框的宽度。

2. border-box

特点：元素的 width 和 height 包含内容区、内边距和边框的宽度和高度，但不包含外边距。
应用场景：当需要固定元素的总宽度和高度，而不希望内边距和边框影响布局时使用。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 200px;
            height: 100px;
            padding: 10px;
            border: 2px solid black;
            box-sizing: border-box;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div>这是 border-box 类型的元素</div>
</body>
</html>

这里的 div 元素的总宽度为 200px，总高度为 100px，内边距和边框会在这个范围内显示。

1.2.3 解决盒模型宽度计算冲突的方法

1. 使用 border-box

将元素的 box-sizing 属性设置为 border-box，可以避免内边距和边框影响元素的总宽度。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 200px;
            padding: 10px;
            border: 2px solid black;
            box-sizing: border-box;
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <div>这是使用 border-box 解决宽度冲突的元素</div>
</body>
</html>

2. 调整内边距和边框的宽度

如果不想改变 box-sizing 属性，可以适当调整内边距和边框的宽度，以确保元素的总宽度符合要求。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 200px;
            padding: 5px;
            border: 1px solid black;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div>这是通过调整内边距和边框宽度解决宽度冲突的元素</div>
</body>
</html>

1.3 样式继承问题

1.3.1 哪些属性可以继承，哪些不能

1. 可继承的属性

文字相关属性 ：如 color、font-family、font-size、font-weight 等。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            color: blue;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <p>这是一段继承了文字颜色和字体的段落</p>
</body>
</html>

这里的 p 元素会继承 body 元素的文字颜色和字体。

列表相关属性 ：如 list-style-type、list-style-position 等。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
    </ul>
</body>
</html>

这里的 li 元素会继承 ul 元素的列表样式类型。

2. 不可继承的属性

盒模型相关属性 ：如 width、height、padding、border、margin 等。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            width: 500px;
        }
    </style>
</head>
<body>
    <p>这是一段不会继承宽度的段落</p>
</body>
</html>

这里的 p 元素不会继承 body 元素的宽度。

定位相关属性 ：如 position、top、right、bottom、left 等。

1.3.2 控制样式继承的方法

1. 使用 `inherit` 值

可以将某个属性的值设置为 inherit，强制元素继承父元素的该属性值。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            color: green;
        }
        p {
            color: inherit;
        }
    </style>
</head>
<body>
    <p>这是一段强制继承文字颜色的段落</p>
</body>
</html>

2. 使用 `initial` 值

将某个属性的值设置为 initial，可以将该属性重置为其默认值，不继承父元素的属性值。例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            color: purple;
        }
        p {
            color: initial;
        }
    </style>
</head>
<body>
    <p>这是一段重置文字颜色的段落</p>
</body>
</html>

1.3.3 样式继承对布局的影响

1. 正面影响

减少代码重复 ：通过继承，一些通用的样式可以只在父元素上设置，子元素自动继承，减少了代码的重复编写。例如，在 body 元素上设置文字颜色和字体，所有子元素都会继承这些样式。
保持一致性：继承可以确保页面中相关元素的样式保持一致，提高页面的整体美观度和可读性。

2. 负面影响

意外样式冲突 ：如果不小心在父元素上设置了一些不希望子元素继承的样式，可能会导致子元素出现意外的样式冲突。例如，在 body 元素上设置了 width 属性，可能会影响到一些不希望继承该宽度的子元素的布局。
调试困难：由于样式继承的存在，当出现样式问题时，可能需要追溯到父元素甚至更上层的元素来查找问题的根源，增加了调试的难度。

第二章 CSS布局相关提问

2.1 浮动布局问题

2.1.1 浮动元素的特性及影响

1. 浮动元素的特性

脱离文档流 ：浮动元素会脱离正常的文档流，就像从页面的"队伍"中跑出来一样😜。其他正常元素在布局时会忽略浮动元素所占的空间。例如，一个浮动的 <div> 元素，它后面的元素会向上移动，填补它原本在文档流中的位置。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .float-left {
      float: left;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }

    .normal {
      width: 200px;
      height: 200px;
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div class="float-left"></div>
  <div class="normal"></div>
</body>

</html>

在这个例子中，.float-left 元素浮动后，.normal 元素会向上移动。

包裹性：浮动元素会尽可能地收缩以适应其内容，就像给内容穿上了一件紧身衣🤏。如果浮动元素内只有文本，它的宽度会根据文本的长度来确定。
行内显示：浮动元素会像行内元素一样水平排列，多个浮动元素会依次排列在一行，直到空间不够才会换行。

2. 浮动元素的影响

父元素高度塌陷：由于浮动元素脱离文档流，父元素在计算高度时不会包含浮动元素的高度，导致父元素高度塌陷为 0。这就好比一个容器里的东西飘起来了，容器却不知道里面有东西，自己瘪下去了😔。
影响相邻元素布局：浮动元素会影响相邻元素的位置和排列方式，可能导致布局混乱。

2.1.2 清除浮动的方法及原理

1. 额外标签法

方法：在浮动元素的末尾添加一个空的块级元素，如 <div style="clear: both;"></div>。
原理：clear 属性用于清除元素的浮动影响，clear: both 表示元素的左右两侧都不允许有浮动元素，这样就可以让父元素包含浮动元素的高度。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .parent {
      border: 1px solid black;
    }

    .float-left {
      float: left;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }

    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="float-left"></div>
    <div class="clear"></div>
  </div>
</body>

</html>

2. BFC 法

方法：将父元素设置为 BFC（块级格式化上下文），可以通过设置 overflow: hidden、display: inline-block 等方式实现。
原理：BFC 会包含其内部的浮动元素，就像一个独立的小盒子，把浮动元素都装在里面，从而避免父元素高度塌陷。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .parent {
      border: 1px solid black;
      overflow: hidden;
    }

    .float-left {
      float: left;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="float-left"></div>
  </div>
</body>

</html>

3. 伪元素法

方法：使用 ::after 伪元素为父元素添加一个内容为空的元素，并设置 clear: both。
原理：本质上和额外标签法类似，只是通过伪元素来实现，避免了在 HTML 中添加额外的标签。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .parent {
      border: 1px solid black;
    }

    .parent::after {
      content: "";
      display: block;
      clear: both;
    }

    .float-left {
      float: left;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="float-left"></div>
  </div>
</body>

</html>

2.1.3 浮动布局在响应式设计中的应用和问题

1. 应用

多列布局：可以使用浮动实现简单的多列布局，在不同屏幕尺寸下，通过媒体查询调整列的宽度和浮动方向，实现响应式效果。例如，在大屏幕上显示三列，在小屏幕上显示一列。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .column {
      float: left;
      width: 33.33%;
      box-sizing: border-box;
      padding: 10px;
      background-color: lightblue;
    }

    @media (max-width: 768px) {
      .column {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</body>

</html>

2. 问题

高度不一致问题：浮动元素的高度可能不一致，导致布局错乱。例如，在多列布局中，如果某一列的内容较多，高度较高，可能会影响其他列的显示。
清除浮动复杂：在响应式设计中，可能需要根据不同的屏幕尺寸多次清除浮动，增加了代码的复杂性。

2.2 定位布局问题

2.2.1 不同定位类型（static、relative、absolute、fixed、sticky）的区别和使用场景

1. static

特点：元素的默认定位方式，元素按照正常的文档流进行布局，top、right、bottom、left 和 z-index 属性无效。
使用场景 ：当不需要对元素进行特殊定位时，使用默认的 static 定位。

2. relative

特点：元素相对于其正常位置进行定位，元素仍然占据原来的空间，只是在视觉上进行了移动。
使用场景：常用于作为绝对定位元素的参考元素，或者对元素进行小范围的位置调整。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .relative {
      position: relative;
      top: 20px;
      left: 20px;
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <div class="relative">This is a relatively positioned element.</div>
</body>

</html>

3. absolute

特点：元素脱离文档流，相对于最近的已定位祖先元素（即 position 属性值不为 static 的祖先元素）进行定位。如果没有已定位的祖先元素，则相对于 <html> 元素定位。
使用场景：用于创建弹出框、下拉菜单等需要脱离文档流的元素。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .parent {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: lightcoral;
    }

    .absolute {
      position: absolute;
      top: 50px;
      left: 50px;
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="absolute">This is an absolutely positioned element.</div>
  </div>
</body>

</html>

4. fixed

特点：元素脱离文档流，相对于浏览器窗口进行定位，无论页面如何滚动，元素的位置都保持不变。
使用场景：常用于创建固定在页面顶部的导航栏、侧边栏等。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <div class="fixed">This is a fixed element.</div>
  <p>Scroll down to see the fixed element stay in place.</p>
  <p>Scroll down to see the fixed element stay in place.</p>
  <p>Scroll down to see the fixed element stay in place.</p>
  <!-- 更多内容 -->
</body>

</html>

5. sticky

特点：元素在正常文档流中，当滚动到特定位置时，会固定在页面上，就像粘性元素一样。它是 relative 和 fixed 的结合。
使用场景：常用于创建粘性标题、侧边栏等，当滚动到一定位置时固定显示。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .sticky {
      position: sticky;
      top: 0;
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <div class="sticky">This is a sticky element.</div>
  <p>Scroll down to see the sticky element stick to the top.</p>
  <p>Scroll down to see the sticky element stick to the top.</p>
  <p>Scroll down to see the sticky element stick to the top.</p>
  <!-- 更多内容 -->
</body>

</html>

2.2.2 绝对定位和相对定位的组合使用技巧

创建弹出框 ：将父元素设置为 position: relative，子元素设置为 position: absolute，可以让子元素相对于父元素进行定位，实现弹出框的效果。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .parent {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: lightcoral;
    }

    .popup {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: lightblue;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="popup">This is a popup.</div>
  </div>
</body>

</html>

图片上的文字说明 ：将图片所在的容器设置为 position: relative，文字说明设置为 position: absolute，可以将文字说明精确地定位在图片的特定位置。

2.2.3 定位元素的层级关系和 z-index 的使用

层级关系：定位元素默认按照它们在 HTML 文档中的顺序进行堆叠，后面的元素会覆盖前面的元素。
z-index ：z-index 属性用于控制定位元素的堆叠顺序，值越大的元素会显示在越上面。z-index 只对定位元素（position 属性值不为 static）有效。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .box1 {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 100px;
      height: 100px;
      background-color: lightblue;
      z-index: 1;
    }

    .box2 {
      position: absolute;
      top: 40px;
      left: 40px;
      width: 100px;
      height: 100px;
      background-color: lightcoral;
      z-index: 2;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

</html>

在这个例子中，.box2 的 z-index 值为 2，大于 .box1 的 z-index 值 1，所以 .box2 会显示在 .box1 的上面。

2.3 弹性布局（Flexbox）问题

2.3.1 Flexbox的基本概念和属性

1. 基本概念

Flex 容器 ：设置了 display: flex 或 display: inline-flex 的元素称为 Flex 容器。它就像一个"盒子"，用来容纳 Flex 项目。
Flex 项目：Flex 容器的直接子元素称为 Flex 项目。它们会按照 Flex 容器的规则进行布局。

2. 容器属性

flex-direction ：定义 Flex 项目的排列方向，有 row（水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .flex-container {
      display: flex;
      flex-direction: row;
      background-color: lightblue;
    }

    .flex-item {
      background-color: lightcoral;
      margin: 10px;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>
</body>

</html>

flex-wrap ：定义 Flex 项目是否换行，有 nowrap（不换行）、wrap（换行）、wrap-reverse（换行且顺序反转）。
justify-content ：定义 Flex 项目在主轴上的对齐方式，有 flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间距相等）、space-around（每个项目两侧间距相等）。
align-items ：定义 Flex 项目在交叉轴上的对齐方式，有 stretch（拉伸填充容器）、flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）。

3. 项目属性

flex-grow：定义 Flex 项目的放大比例，默认值为 0，表示不放大。
flex-shrink：定义 Flex 项目的缩小比例，默认值为 1，表示可以缩小。
flex-basis ：定义 Flex 项目在分配多余空间之前的初始大小，默认值为 auto。

2.3.2 实现水平和垂直居中的Flexbox方法

水平和垂直居中 ：将 Flex 容器的 justify-content 和 align-items 属性都设置为 center。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .flex-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      background-color: lightblue;
    }

    .flex-item {
      background-color: lightcoral;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div class="flex-container">
    <div class="flex-item">Centered Item</div>
  </div>
</body>

</html>

第三章 CSS视觉效果相关提问

3.1 背景和边框效果问题

3.1.1 背景图片的处理（缩放、定位、重复等）

1. 背景图片缩放

在CSS中，我们可以使用background-size属性来控制背景图片的缩放。它有以下几种常见取值：

长度值 ：例如background-size: 200px 100px;，第一个值表示宽度，第二个值表示高度。这会将背景图片的宽度设置为200px，高度设置为100px。😎
百分比值 ：background-size: 50% 50%;，表示背景图片的宽度和高度都为元素宽度和高度的50%。
cover ：background-size: cover;，它会将背景图片等比例缩放，直到完全覆盖整个元素，可能会有部分图片超出元素范围。🌟
contain ：background-size: contain;，背景图片会等比例缩放，直到图片的宽或高完全适应元素，图片会完整显示在元素内。

2. 背景图片定位

使用background-position属性可以设置背景图片的位置。常见取值如下：

关键字 ：如background-position: top left;，表示将背景图片定位在元素的左上角。还可以使用top center、bottom right等组合。
百分比值 ：background-position: 20% 30%;，第一个值表示水平位置，第二个值表示垂直位置。
长度值 ：background-position: 10px 20px;，同样第一个值是水平偏移量，第二个值是垂直偏移量。

3. 背景图片重复

background-repeat属性用于控制背景图片的重复方式：

repeat：默认值，背景图片会在水平和垂直方向上都重复。
repeat-x：背景图片只在水平方向上重复。
repeat-y：背景图片只在垂直方向上重复。
no-repeat：背景图片不重复，只显示一次。

3.1.2 边框样式的设置和特效（圆角、阴影等）

1. 边框样式设置

使用border-style属性可以设置边框的样式，常见取值有：

solid：实线边框。
dotted：点状边框。
dashed：虚线边框。
double：双实线边框。

例如：border-style: solid;会为元素添加一个实线边框。

2. 圆角边框

使用border-radius属性可以创建圆角边框。可以为每个角单独设置半径，也可以统一设置。

统一设置 ：border-radius: 10px;，表示四个角的圆角半径都是10px。
单独设置 ：border-radius: 10px 20px 30px 40px;，依次为左上角、右上角、右下角、左下角的圆角半径。

3. 边框阴影

使用box-shadow属性可以为元素添加边框阴影。它的语法是box-shadow: h-shadow v-shadow blur spread color inset;。

h-shadow：水平阴影的位置，正值表示向右，负值表示向左。
v-shadow：垂直阴影的位置，正值表示向下，负值表示向上。
blur：可选，阴影的模糊半径。
spread：可选，阴影的扩展半径。
color：可选，阴影的颜色。
inset：可选，将外部阴影改为内部阴影。

例如：box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);会为元素添加一个向右下方偏移、模糊半径为10px、扩展半径为2px的黑色半透明阴影。😏

3.1.3 背景和边框的混合模式及应用

1. 混合模式概述

CSS中的混合模式可以让背景和边框以不同的方式相互作用，产生独特的视觉效果。使用background-blend-mode属性可以设置背景的混合模式，使用mix-blend-mode属性可以设置元素内容与背景的混合模式。

2. 常见混合模式

multiply：正片叠底，将背景和前景颜色相乘，结果颜色会更暗。
screen：滤色，将背景和前景颜色反转后相乘，再反转结果，颜色会更亮。
overlay：叠加，根据背景颜色的亮度，自动选择正片叠底或滤色模式。

例如：background-blend-mode: multiply;会让背景图片和背景颜色以正片叠底的方式混合。

3. 应用场景

混合模式可以用于创建复古风格的图片效果、突出显示某些元素等。比如在一个图片上叠加一个半透明的颜色层，使用混合模式可以让图片呈现出独特的色调。🎨

3.2 文本效果问题

3.2.1 文本的排版和对齐方式

1. 文本排版

行高：使用line-height属性可以设置文本的行高。例如line-height: 1.5;表示行高是字体大小的1.5倍，这样可以让文本看起来更舒适。
字母间距 ：letter-spacing属性可以设置字母之间的间距。如letter-spacing: 2px;会让字母之间的间距增加2px。
单词间距 ：word-spacing属性用于设置单词之间的间距。

2. 文本对齐方式

text-align ：用于设置文本的水平对齐方式，常见取值有left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。
vertical-align ：用于设置行内元素或表格单元格内容的垂直对齐方式，取值有top、middle、bottom等。

3.2.2 文本的装饰效果（下划线、删除线等）

1. 下划线

使用text-decoration: underline;可以为文本添加下划线。还可以设置下划线的颜色、样式等。例如：text-decoration: underline red dotted;会添加一条红色的点状下划线。

2. 删除线

text-decoration: line-through;会在文本中间添加一条删除线。同样可以设置删除线的颜色和样式。

3. 上划线

text-decoration: overline;会在文本上方添加一条上划线。

3.2.3 文本的阴影和渐变效果

1. 文本阴影

使用text-shadow属性可以为文本添加阴影。语法和box-shadow类似，text-shadow: h-shadow v-shadow blur color;。

例如：text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);会为文本添加一个向右下方偏移、模糊半径为5px的黑色半透明阴影。

2. 文本渐变

在CSS中实现文本渐变需要结合background和-webkit-background-clip属性。示例代码如下：

css 复制代码

.text-gradient {
    background: linear-gradient(to right, red, yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

这样文本就会呈现出从红色到黄色的渐变效果。🌈

3.3 过渡和动画效果问题

3.3.1 过渡效果的实现和属性设置

1. 过渡效果概述

过渡效果可以让元素的属性在一定时间内平滑地变化。使用transition属性来实现过渡效果。

2. 过渡属性设置

transition属性是一个简写属性，它包含四个部分：transition: property duration timing-function delay;。

property ：要过渡的属性，如width、opacity等。可以使用all表示所有属性都过渡。
duration：过渡的持续时间，单位是秒（s）或毫秒（ms）。
timing-function ：过渡的时间函数，控制过渡的速度变化，常见取值有ease（默认，慢-快-慢）、linear（匀速）、ease-in（慢开始）、ease-out（慢结束）等。
delay：过渡的延迟时间，即多久后开始过渡。

例如：transition: width 1s ease 0.5s;表示宽度属性在0.5秒后开始过渡，持续时间为1秒，过渡速度是慢-快-慢。

3.3.2 动画效果的创建和关键帧设置

1. 动画效果创建

使用animation属性可以创建动画效果。它也是一个简写属性，语法为animation: name duration timing-function delay iteration-count direction fill-mode play-state;。

name ：动画的名称，需要和@keyframes定义的名称一致。
duration：动画的持续时间。
timing-function：时间函数。
delay：延迟时间。
iteration-count ：动画的播放次数，可以是具体数字，也可以是infinite（无限循环）。
direction ：动画的播放方向，如normal（正常播放）、reverse（反向播放）等。
fill-mode ：动画在播放前后的状态，如forwards（动画结束后停留在最后一帧）、backwards（动画开始前应用第一帧样式）等。
play-state ：动画的播放状态，如running（播放）、paused（暂停）。

2. 关键帧设置

使用@keyframes规则可以定义动画的关键帧。例如：

css 复制代码

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

这个动画会让元素从初始位置向右移动200px。然后可以通过animation属性应用这个动画：animation: slide 2s linear infinite;。

3.3.3 优化过渡和动画性能的方法

1. 使用硬件加速

使用transform和opacity属性进行过渡和动画，因为这两个属性可以触发浏览器的硬件加速，提高性能。例如：

css 复制代码

.element {
    transition: transform 0.5s ease;
}
.element:hover {
    transform: scale(1.2);
}

2. 减少重排和重绘

避免在过渡和动画过程中频繁改变元素的布局属性（如width、height、margin等），因为这些改变会导致浏览器进行重排和重绘，影响性能。

3. 控制动画帧率

尽量将动画的帧率控制在60fps左右，避免过高或过低的帧率。可以通过合理设置过渡和动画的持续时间和时间函数来实现。💪

第四章 CSS兼容性相关提问

4.1 不同浏览器的兼容性问题

4.1.1 常见的浏览器兼容性差异及解决方案

1. 盒模型差异

问题描述：在标准模式下，大部分现代浏览器（如 Chrome、Firefox 等）遵循 W3C 标准盒模型，即元素的宽度和高度只包含内容区，而内边距（padding）和边框（border）会额外增加元素的实际尺寸。但在 IE6、IE7 等旧版浏览器的怪异模式下，元素的宽度和高度包含了内容区、内边距和边框。
解决方案 ：使用 box-sizing 属性。将其值设置为 border-box，可以让元素的宽度和高度包含内容区、内边距和边框，这样在不同浏览器中表现一致。例如：

css 复制代码

div {
    box-sizing: border-box;
    width: 200px;
    padding: 10px;
    border: 1px solid black;
}

2. 透明度差异

问题描述 ：不同浏览器对透明度的支持方式不同。例如，IE8 及以下版本不支持 opacity 属性，而是使用 filter 属性来实现透明度效果。
解决方案 ：同时使用 opacity 和 filter 属性。示例如下：

css 复制代码

div {
    opacity: 0.5; /* 现代浏览器 */
    filter: alpha(opacity=50); /* IE8 及以下 */
}

3. 浮动元素的清除问题

问题描述：在不同浏览器中，浮动元素可能会导致父元素高度塌陷，即父元素无法自动适应浮动子元素的高度。
解决方案 ：使用 clearfix 清除浮动。可以通过伪元素来实现，代码如下：

css 复制代码

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

然后在包含浮动元素的父元素上添加 clearfix 类。

4.1.2 处理浏览器前缀的方法和工具

1. 手动添加前缀

原理：在 CSS 属性前添加特定浏览器的前缀，以确保该属性在不同浏览器中都能正常工作。常见的浏览器前缀有 -webkit-（Chrome、Safari 等 WebKit 内核浏览器）、-moz-（Firefox）、-ms-（IE）、-o-（Opera）。
示例：

css 复制代码

div {
    -webkit-border-radius: 10px; /* WebKit 内核浏览器 */
    -moz-border-radius: 10px; /* Firefox */
    border-radius: 10px; /* 标准写法 */
}

2. 使用 Autoprefixer

原理：Autoprefixer 是一个 PostCSS 插件，它可以根据浏览器的兼容性配置，自动为 CSS 属性添加必要的浏览器前缀。
使用步骤 ：
- 安装 Autoprefixer：通过 npm 安装 autoprefixer 和 postcss-cli。
- 配置浏览器兼容性：在项目根目录下创建 .browserslistrc 文件，指定需要兼容的浏览器版本，例如 last 2 versions, > 1% 表示兼容每个浏览器的最后两个版本以及市场占有率大于 1% 的浏览器。
- 运行 Autoprefixer：使用 postcss 命令处理 CSS 文件，例如 npx postcss input.css -o output.css --use autoprefixer。

4.1.3 测试 CSS 兼容性的工具和方法

1. 浏览器测试工具

BrowserStack：这是一个在线的跨浏览器测试平台，可以模拟不同浏览器和操作系统环境，对网页进行测试。用户只需上传网页或输入网页 URL，即可选择不同的浏览器和版本进行测试。
Sauce Labs：同样是一个在线测试平台，支持多种浏览器、操作系统和移动设备。它提供了可视化的测试界面，方便用户查看网页在不同环境下的显示效果。

2. 本地测试

多浏览器安装：在本地计算机上安装多种不同的浏览器，如 Chrome、Firefox、Safari、IE（如果需要测试旧版 IE 兼容性）等，然后直接在这些浏览器中打开网页进行测试。
开发者工具：现代浏览器都提供了强大的开发者工具，如 Chrome 的开发者工具可以模拟不同的屏幕尺寸、设备类型和网络环境，帮助开发者发现和解决 CSS 兼容性问题。

4.2 不同设备的兼容性问题

4.2.1 响应式设计在不同屏幕尺寸下的兼容性问题

1. 布局错乱问题

问题描述：在不同屏幕尺寸下，网页的布局可能会出现错乱，例如元素重叠、显示不全等。
解决方案：使用媒体查询（Media Queries）。媒体查询可以根据设备的屏幕宽度、高度、分辨率等条件，应用不同的 CSS 样式。示例如下：

css 复制代码

/* 小屏幕设备 */
@media (max-width: 767px) {
    .container {
        width: 100%;
    }
}

/* 中等屏幕设备 */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        width: 750px;
    }
}

/* 大屏幕设备 */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

2. 字体大小问题

问题描述：在不同屏幕尺寸下，字体大小可能会显得过大或过小，影响阅读体验。
解决方案 ：使用相对单位，如 em、rem 或 vw、vh。相对单位可以根据父元素或视口的大小自动调整字体大小。例如：

css 复制代码

body {
    font-size: 16px;
}

h1 {
    font-size: 2rem; /* 相对于根元素字体大小的 2 倍 */
}

4.2.2 移动设备上的 CSS 性能优化和特殊处理

1. 性能优化

减少重排和重绘：重排和重绘会消耗大量的性能，因此应尽量减少它们的发生。例如，避免频繁修改元素的样式，可以一次性修改多个样式属性。
压缩 CSS 文件：使用工具（如 CSSNano）对 CSS 文件进行压缩，去除不必要的空格、注释等，减小文件大小，加快加载速度。

2. 特殊处理

触摸事件优化 ：在移动设备上，用户通过触摸屏幕进行交互，因此需要优化触摸事件的响应。可以使用 touch-action 属性来控制元素的触摸行为，例如：

css 复制代码

div {
    touch-action: pan-y; /* 允许垂直滚动 */
}

视口单位适配 ：使用视口单位（如 vw、vh）可以根据视口的大小自动调整元素的尺寸，使网页在不同移动设备上都能有良好的显示效果。

4.2.3 高分辨率屏幕（Retina 屏幕）的 CSS 适配问题

1. 图片模糊问题

问题描述：在高分辨率屏幕上，普通图片可能会显得模糊，因为屏幕的像素密度更高。
解决方案 ：使用高分辨率图片或 SVG 图片。可以通过媒体查询和 srcset 属性来实现根据屏幕分辨率自动加载不同分辨率的图片。示例如下：

html 复制代码

<img src="image.jpg"
     srcset="image@2x.jpg 2x, image@3x.jpg 3x"
     alt="An image">

2. 字体和图标显示问题

问题描述：在高分辨率屏幕上，字体和图标可能会出现锯齿或显示不清晰的问题。
解决方案 ：使用 text-rendering 属性来优化字体渲染，使用 SVG 图标代替位图图标。例如：

css 复制代码

body {
    text-rendering: optimizeLegibility;
}

第五章 CSS与其他技术结合相关提问

5.1 CSS与HTML结合问题

5.1.1 HTML结构对CSS样式的影响

HTML结构就像是房子的骨架，它对CSS样式的呈现起着至关重要的作用😎。

元素嵌套关系 ：HTML元素的嵌套层次会影响CSS选择器的使用和样式的继承。例如，在一个<div>元素中嵌套了一个<p>元素，我们可以使用后代选择器div p来为<p>元素设置样式。如果嵌套结构复杂，选择器可能会变得很长，影响代码的可读性和性能。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div p {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个嵌套在div中的段落。</p>
    </div>
</body>
</html>

元素顺序：HTML元素的顺序会影响页面的布局和样式的覆盖。如果两个元素有重叠的样式设置，后面的元素样式可能会覆盖前面的元素样式。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            color: red;
        }
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p>这个段落的颜色最终会是绿色。</p>
</body>
</html>

5.1.2 优化HTML和CSS代码的协作方式

为了让HTML和CSS代码更好地协作，我们可以采用以下方法👏：

分离结构和样式 ：将HTML代码和CSS代码分别放在不同的文件中，这样可以提高代码的可维护性。例如，创建一个名为styles.css的文件，将所有的CSS样式写在这个文件中，然后在HTML文件中通过<link>标签引入。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

css 复制代码

/* styles.css */
p {
    color: purple;
}

使用类名和ID：合理使用类名和ID来为HTML元素添加样式，避免使用内联样式。类名可以重复使用，ID则应该是唯一的。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
       .highlight {
            background-color: yellow;
        }
        #special {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="highlight">这个段落有黄色背景。</p>
    <p id="special">这个段落是加粗的。</p>
</body>
</html>

遵循命名规范 ：为类名和ID使用有意义的名称，这样可以提高代码的可读性。例如，使用header、nav、main、footer等名称来表示页面的不同部分。

5.1.3 利用HTML语义化标签优化CSS样式

HTML语义化标签可以让代码更具可读性，同时也有助于搜索引擎优化（SEO），还能方便CSS样式的编写🤗。

使用合适的标签 ：例如，使用<header>标签来表示页面的头部，使用<nav>标签来表示导航栏，使用<main>标签来表示页面的主要内容，使用<footer>标签来表示页面的底部。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        header {
            background-color: lightgray;
            padding: 20px;
        }
        nav {
            background-color: #333;
            color: white;
        }
        main {
            padding: 20px;
        }
        footer {
            background-color: lightgray;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <header>
        <h1>网站标题</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </nav>
    <main>
        <p>这是页面的主要内容。</p>
    </main>
    <footer>
        <p>版权所有 &copy; 2024</p>
    </footer>
</body>
</html>

样式继承和复用 ：语义化标签可以让CSS样式的继承和复用更加自然。例如，我们可以为<article>标签设置一些通用的样式，然后在每个具体的文章中复用这些样式。

5.2 CSS与JavaScript结合问题

5.2.1 通过JavaScript动态修改CSS样式的方法

JavaScript可以在页面加载后动态地修改CSS样式，实现更加丰富的交互效果😜。

使用style属性 ：可以直接通过元素的style属性来修改元素的样式。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p id="myParagraph">这是一个段落。</p>
    <button onclick="changeStyle()">改变样式</button>
    <script>
        function changeStyle() {
            var paragraph = document.getElementById('myParagraph');
            paragraph.style.color = 'red';
            paragraph.style.fontSize = '20px';
        }
    </script>
</body>
</html>

使用classList属性 ：通过classList属性可以添加、删除或切换元素的类名，从而实现样式的修改。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
       .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p id="myParagraph">这是一个段落。</p>
    <button onclick="addHighlight()">添加高亮</button>
    <script>
        function addHighlight() {
            var paragraph = document.getElementById('myParagraph');
            paragraph.classList.add('highlight');
        }
    </script>
</body>
</html>

5.2.2 CSS动画与JavaScript动画的结合和选择

CSS动画和JavaScript动画各有优缺点，我们可以根据具体需求来选择使用，也可以将它们结合起来使用🤝。

CSS动画：优点是性能高、代码简单，适合实现一些简单的动画效果，如渐变、平移、旋转等。缺点是灵活性较差，难以实现复杂的交互逻辑。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: move 2s infinite;
        }
        @keyframes move {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(200px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

JavaScript动画：优点是灵活性高，可以实现复杂的交互逻辑和动画效果。缺点是性能相对较低，代码复杂度较高。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="box" style="width: 100px; height: 100px; background-color: green;"></div>
    <script>
        var box = document.getElementById('box');
        var position = 0;
        function move() {
            position++;
            box.style.left = position + 'px';
            if (position < 200) {
                requestAnimationFrame(move);
            }
        }
        move();
    </script>
</body>
</html>

结合使用：可以先使用CSS动画实现基本的动画效果，然后通过JavaScript来控制动画的开始、暂停、结束等。

5.2.3 利用JavaScript实现CSS样式的响应式调整

JavaScript可以根据不同的屏幕尺寸和设备类型来动态调整CSS样式，实现响应式设计📱。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            width: 100%;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">这是一个容器。</div>
    <script>
        function adjustStyle() {
            var container = document.querySelector('.container');
            if (window.innerWidth < 600) {
                container.style.backgroundColor = 'lightgreen';
            } else {
                container.style.backgroundColor = 'lightblue';
            }
        }
        window.addEventListener('resize', adjustStyle);
        adjustStyle();
    </script>
</body>
</html>

5.3 CSS与预处理器（如Sass、Less）结合问题

5.3.1 预处理器的基本语法和优势

CSS预处理器（如Sass、Less）提供了一些原生CSS没有的特性，让CSS代码的编写更加高效和灵活👍。

变量：可以定义变量来存储常用的值，如颜色、字体大小等。

scss 复制代码

// Sass示例
$primary-color: #007bff;
body {
    color: $primary-color;
}

less 复制代码

// Less示例
@primary-color: #007bff;
body {
    color: @primary-color;
}

嵌套：可以在选择器中嵌套其他选择器，使代码结构更加清晰。

scss 复制代码

// Sass示例
nav {
    ul {
        list-style-type: none;
        li {
            display: inline-block;
            a {
                color: #333;
            }
        }
    }
}

less 复制代码

// Less示例
nav {
    ul {
        list-style-type: none;
        li {
            display: inline-block;
            a {
                color: #333;
            }
        }
    }
}

混合（Mixin）：可以定义一组样式，然后在其他地方复用。

scss 复制代码

// Sass示例
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}
.button {
    @include border-radius(5px);
}

less 复制代码

// Less示例
.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.button {
    .border-radius(5px);
}

5.3.2 预处理器与原生CSS的转换和兼容性问题

预处理器编写的代码不能直接在浏览器中使用，需要将其转换为原生CSS代码。

转换工具 ：可以使用专门的工具来进行转换，如Sass的node-sass或dart-sass，Less的lessc。
兼容性：转换后的原生CSS代码在不同浏览器中的兼容性与普通CSS代码相同。需要注意的是，一些预处理器的特性可能在转换后生成的代码量较大，需要进行压缩和优化。

5.3.3 利用预处理器提高CSS开发效率的技巧

使用预处理器可以提高CSS开发效率，以下是一些技巧🤓：

模块化开发 ：将不同功能的样式代码分别放在不同的文件中，然后通过@import语句引入。

scss 复制代码

// main.scss
@import 'variables';
@import 'mixins';
@import 'header';
@import 'footer';

使用循环和条件语句：预处理器支持循环和条件语句，可以减少重复代码的编写。

scss 复制代码

// Sass示例
@for $i from 1 through 5 {
   .col-#{$i} {
        width: 20% * $i;
    }
}

利用函数：预处理器提供了一些内置函数，还可以自定义函数，方便进行计算和处理。

scss 复制代码

// Sass示例
@function darken-color($color, $amount) {
    @return darken($color, $amount);
}
.button {
    background-color: darken-color(#007bff, 10%);
}

【css】【面试提问】css经典问题总结

第一章 CSS基础相关提问

1.1 选择器问题

1.1.1 选择器优先级疑问

1. 优先级规则

2. 计算优先级

1.1.2 复杂选择器的使用场景和示例

1. 后代选择器

2. 子选择器

3. 相邻兄弟选择器

1.1.3 选择器的性能比较及优化

1. 性能比较

2. 优化方法

1.2 盒模型问题

1.2.1 盒模型各部分的计算方式

1. 内容区（content）

2. 内边距（padding）

3. 边框（border）

4. 外边距（margin）

1.2.2 盒模型的不同类型（content-box、border-box等）及应用场景

1. content-box

2. border-box

1.2.3 解决盒模型宽度计算冲突的方法

1. 使用 border-box

2. 调整内边距和边框的宽度

1.3 样式继承问题

1.3.1 哪些属性可以继承，哪些不能

1. 可继承的属性

2. 不可继承的属性

1.3.2 控制样式继承的方法

1. 使用 inherit 值

2. 使用 initial 值

1.3.3 样式继承对布局的影响

1. 正面影响

2. 负面影响

第二章 CSS布局相关提问

2.1 浮动布局问题

2.1.1 浮动元素的特性及影响

1. 浮动元素的特性

2. 浮动元素的影响

2.1.2 清除浮动的方法及原理

1. 额外标签法

2. BFC 法

3. 伪元素法

2.1.3 浮动布局在响应式设计中的应用和问题

1. 应用

2. 问题

2.2 定位布局问题

2.2.1 不同定位类型（static、relative、absolute、fixed、sticky）的区别和使用场景

1. static

2. relative

3. absolute

4. fixed

5. sticky

2.2.2 绝对定位和相对定位的组合使用技巧

2.2.3 定位元素的层级关系和 z-index 的使用

2.3 弹性布局（Flexbox）问题

2.3.1 Flexbox的基本概念和属性

1. 基本概念

2. 容器属性

3. 项目属性

2.3.2 实现水平和垂直居中的Flexbox方法

第三章 CSS视觉效果相关提问

3.1 背景和边框效果问题

3.1.1 背景图片的处理（缩放、定位、重复等）

1. 背景图片缩放

2. 背景图片定位

3. 背景图片重复

3.1.2 边框样式的设置和特效（圆角、阴影等）

1. 边框样式设置

2. 圆角边框

3. 边框阴影

3.1.3 背景和边框的混合模式及应用

1. 混合模式概述

2. 常见混合模式

3. 应用场景

3.2 文本效果问题

3.2.1 文本的排版和对齐方式

1. 文本排版

2. 文本对齐方式

1. 使用 `inherit` 值

2. 使用 `initial` 值