跳到主要内容

题目 6-题目 10

6.全局样式命名冲突和样式覆盖问题怎样解决​

1.使用命名空间（Namespacing）：给样式类名添加前缀或命名空间，以确保每个组件的样式类名不会冲突。例如，在一个项目中，可以为每个组件的样式类名都添加一个唯一的前缀，例如.componentA-button 和.componentB-button，这样可以避免命名冲突。

2.使用 BEM 命名规范：BEM（块、元素、修饰符）是一种常用的命名规范，可以将样式类名分成块（block）、元素（element）和修饰符（modifier）三个部分，以确保样式的唯一性和可读性。例如，.button 表示一个块，.button__icon 表示一个元素，.button--disabled 表示一个修饰符。

3.使用 CSS 预处理器：CSS 预处理器（如 Sass、Less）可以提供变量、嵌套规则和模块化等功能，可以更方便地管理样式并避免命名冲突。例如，可以使用变量来定义颜色和尺寸，使用嵌套规则来组织样式，并将样式拆分成多个模块。

4.使用 CSS 模块：CSS 模块提供了在组件级别上限定样式作用域的能力，从而避免了全局样式的冲突和覆盖。每个组件的样式定义在组件内部，使用唯一的类名，确保样式的隔离性和唯一性。

5.使用 CSS-in-JS 解决方案：CSS-in-JS 是一种将 CSS 样式直接写入 JavaScript 代码中的方法，通过将样式与组件绑定，可以避免全局样式的冲突问题。一些常见的 CSS-in-JS 解决方案包括 Styled Components、Emotion 和 CSS Modules with React 等。

7.CSS 属性计算-calc 怎么使用，具体有哪些使用场景？​

使用场景​

calc() 可以在很多情况下派上用场，特别是在需要混合不同单位或需要响应式布局时，它能够根据不同的条件灵活调整元素的尺寸或位置。
1。响应式布局 calc() 可以帮助你创建响应式的布局，动态调整元素的宽度或高度，使布局在不同的视口宽度下更加灵活。
2.使用 calc() 来动态计算元素的位置，特别是在绝对定位的情况下，根据父元素的宽度和高度来设置元素的 top、left、right 或 bottom。
3.结合百分比和固定值 有时你可能需要将百分比和固定单位混合使用（例如，百分比加像素），calc() 就可以处理这种需求。
4.动态计算字体大小或间距 你可以使用 calc() 来根据父元素的大小动态计算字体大小、内外边距等。

注意事项​

1.空格要求：在 calc() 函数中，操作符（如 +、-、* 和 /）两边必须有空格，否则会导致语法错误。​

/* 正确 */
width: calc(100% - 20px);

/* 错误 */
width: calc(100%-20px); /* 缺少空格 */

2.单位的混合使用：calc() 允许在一个表达式中混合不同的单位（如百分比和像素），但请注意，乘法和除法操作时只能保持单位一致。例如：​

calc(100% - 50px) 是合法的。
calc(100% * 2) 是不合法的，因为 % 不能直接与数字进行乘法运算。

性能问题：calc() 的计算会在每次渲染时动态计算，虽然现代浏览器优化了这个过程，但在复杂布局和大量元素中，还是有一定的性能开销。因此，尽量避免在性能敏感的场景下过度使用 calc()。​

8.less 文件中怎么使用函数？​

1.内置函数​

LESS 提供了常见的数学运算函数，比如加、减、乘、除等：

@base: 10;
@result: @base + 5; // 15

@width: 50px;
@height: 100px;
@area: @width * @height; // 5000px

LESS 提供了许多用于操作颜色的函数，可以调整颜色的亮度、饱和度、透明度等：

  • darken($color, $amount)：使颜色变暗
  • lighten($color, $amount)：使颜色变亮
  • saturate($color, $amount)：增加颜色的饱和度
  • desaturate($color, $amount)：减少颜色的饱和度
  • adjust-hue($color, $degrees)：调整颜色的色相
  • rgba($color, $alpha)：为颜色添加透明度
@color: #00bcd4;

@lightColor: lighten(@color, 10%); // 更亮的颜色
@darkColor: darken(@color, 10%);   // 更暗的颜色
@semiTransparent: rgba(@color, 0.5); // 半透明的颜色

LESS 还提供了一些用于字符串处理的函数：

  • unit($value)：返回值的单位
  • str-length($string)：返回字符串的长度
  • str-index(string,string, substring)：返回子字符串的位置
  • to-upper-case($string)：将字符串转换为大写
  • to-lower-case($string)：将字符串转换为小写
@string: "Hello, LESS!";
@stringLength: str-length(@string); // 12

@upper: to-upper-case(@string); // "HELLO, LESS!"
@lower: to-lower-case(@string); // "hello, less!"

LESS 提供了内置的 media() 函数来定义响应式设计中的媒体查询：

@breakpoint: 768px;

@media-query: media(max-width: @breakpoint);

2.自定义函数​

你也可以在 LESS 中定义自己的函数（Mixin），通过参数传递来实现一些动态的样式计算。自定义函数通常用于计算一些动态的值或者重复的样式逻辑。

// 定义一个自定义的颜色选择函数
.chooseColor(@color) {
  @selectedColor: @color == "primary" ? #3498db :
                  @color == "secondary" ? #2ecc71 :
                  #e74c3c; // 默认红色
  color: @selectedColor;
}

// 使用该函数
.button {
  .chooseColor("primary");  // 使用主色
}

9.flex 布局下，怎么改变元素的顺序​

通过调整 order 属性的值，可以改变元素的顺序。具体步骤如下：

  1. 将元素定义为 Flex 容器，使用 display: flex;或者 display: inline-flex;。
  2. 为每个子元素设置 order 属性，根据需要设置不同的值，值越小的元素会在前面，值相等的元素按照文档流原始顺序排列。
<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.flex-container {
  display: flex;
}

.item {
  order: 2; /* 改变顺序 */
}

请注意，order 属性接受任意整数值，负数也可以使用。同时，当多个元素的 order 值相同时，它们会按照它们在文档流中的位置进行排序。

10.flex：auto 是什么意思​

flex 是复合属性，是 flex-grow,flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto，后两个属性可选。

  1. flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间也不放大
  2. flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小
  3. flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（相当于我们设置的 width）

而 flex: auto; 是 flex:1 1 auto; 的简写，即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但在尺寸不足时会优先最大化内容尺寸。

flex:auto 多用于内容固定，或者内容可控的布局场景，例如导航数量不固定，每个导航文字数量也不固定的导航效果就适合使用 flex:auto 效果来实现.

Loading Comments...