1. CSS选择器的优先级是怎样的

CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器

计算示例：优先级由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

A 的值等于 1 的前提是存在内联样式, 否则 A = 0
B 的值等于 ID选择器出现的次数
C 的值等于类选择器和属性选择器和伪类出现的总次数
D 的值等于标签选择器和伪元素出现的总次数

2. link和@import的区别

link属于XHTML标签，⽽**@import**是CSS提供的。
⻚⾯被加载时，link会同时被加载，⽽@import引⽤的CSS会等到⻚⾯被加载完再加载。
import只在IE 5以上才能识别，⽽link是XHTML标签，⽆兼容问题。
link⽅式的样式权重⾼于@import的权重。
使⽤dom控制样式时具有差别，当使⽤javascript控制dom去改变样式的时候，只能使⽤link标签，因为@import不是dom可以控制的。

3. 有哪些方式（CSS）可以隐藏页面元素

opacity:0 ：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
visibility:hidden : 与上⼀个⽅法类似的效果，占据空间，但是不可以交互了
overflow:hidden : 这个只隐藏元素溢出的部分，但是占据空间且不可交互
display:none : 这个是彻底隐藏了元素，元素从⽂档流中消失，既不占据空间也不交互，也不影响布局
z-index:-9999 : 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
transform: scale(0,0) : 平⾯变换，将元素缩放为0，但是依然占据空间，但不可交互

4. CSS有哪些定位方式

CSS有五种定位方式：

静态定位（static）：元素按照其在HTML中出现的顺序进行默认布局，不受其他定位方式的影响。
相对定位（relative）：元素相对于其正常位置进行定位，通过设置top、bottom、left、right等属性来调整位置。相对定位不会影响其他元素的布局。
绝对定位（absolute）：元素相对于其最近的非静态定位的父元素进行定位，或者相对于整个页面进行定位（如果没有非静态定位的父元素）。通过设置top、bottom、left、right等属性来调整位置。绝对定位会脱离正常文档流，可能会影响其他元素的布局。
固定定位（fixed）：元素相对于浏览器窗口进行定位，始终保持在固定的位置。通过设置top、bottom、left、right等属性来调整位置。固定定位会脱离正常文档流，不会随页面滚动而改变位置。
粘性定位（sticky）：元素在滚动过程中根据设定的阈值切换定位方式，可以在滚动到一定位置时变为固定定位或相对定位。通过设置top、bottom、left、right等属性来调整位置。粘性定位会脱离正常文档流，可能会影响其他元素的布局。

5. click在ios上有300ms延迟的原因以及如何解决

在 iOS 上，点击事件会有一个约300毫秒的延迟，这是因为浏览器需要等待一段时间来确定用户是否要进行双击缩放操作。这个延迟是为了解决双击缩放和单击事件之间的冲突。

为了解决这个延迟，可以使用以下方法之一：

使用CSS属性touch-action: manipulation：这个属性告诉浏览器在触摸屏上不要延迟点击事件。在需要点击事件的元素上添加这个属性即可。

.my-element {
  touch-action: manipulation;
}

使用FastClick库：FastClick是一个JavaScript库，可以消除点击事件的延迟。你可以将它添加到你的项目中，并在需要消除延迟的元素上使用它。

<script src="fastclick.js"></script>
<script>
  window.addEventListener('load', function() {
    FastClick.attach(document.body);
  }, false);
</script>

使用meta标签设置viewport属性：通过设置viewport属性，可以禁用双击缩放，从而消除点击事件的延迟。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

使用addEventListener的touchstart事件代替click事件：由于touchstart事件在触摸屏设备上触发的速度更快，可以使用它来替代click事件，从而避免延迟。

element.addEventListener('touchstart', function() {
  // 处理点击事件
});

6. 什么是BFC

BFC是块级格式化上下文（Block Formatting Context）的缩写。它是CSS中一个重要的概念，用于描述元素在布局时的行为和特性。

BFC是一个独立的渲染区域，其中的元素按照一定的规则进行布局。在BFC中，每个元素的布局不会影响到其它元素，因此可以避免一些布局问题和冲突。

BFC的特性包括：

内部的块级元素会垂直排列，每个元素的左边与包含块的左边对齐（除非设置了浮动或定位）。
块级元素在垂直方向上的边距会重叠，但是在不同的BFC之间不会重叠。
BFC可以包含浮动的元素，防止浮动元素对其它元素的影响。
BFC可以阻止元素被浮动元素覆盖。

创建BFC的方式有多种，包括：

根元素（html元素）会自动创建一个BFC。
设置元素的display属性为inline-block、table-cell、table-caption、flex、grid等。
设置元素的position属性为absolute或fixed。
设置元素的overflow属性为auto、scroll或hidden。

2024前端面试准备之CSS篇（一）