搜集一些常见的CSS类面试题,没事刷一刷,慢慢补充拓展其他内容.

CSS篇

1.介绍下BFC机制及其应用

BFC（Block Formatting Context）块级格式上下文是CSS中的一个重要概念，用于管理网页中的块级元素的布局和定位。BFC机制在页面渲染过程中起到了关键的作用，它定义了元素如何相互影响和交互。

BFC的主要特性包括：

内部的盒子会在垂直方向上一个接一个地放置。
盒子之间的垂直间距由margin属性确定，相邻盒子的上下边距会发生重叠。
BFC区域不会与浮动元素重叠，可以避免元素浮动时的布局问题。
BFC内部的块级元素在水平方向上不会溢出其容器。满足下列条件之一就可以出发BFC： - 根元素变化，即html； - float的值不为none（默认）； - overflow的值不为visible（默认）； - display的值为inline-block, tabke-cell，table-caption； - position的值为absolute或fixed;

BFC的应用场景包括：

清除浮动：当父级元素的子元素都设置了浮动属性后，父元素会发生高度塌陷，这时可以创建一个BFC来清除浮动，避免父元素塌陷问题。
阻止边距重叠：当相邻的两个元素的上下边距发生重叠时，可以将其中一个元素置于一个新创建的BFC中，以避免边距重叠。
创建自适应的两栏布局：通过创建两个BFC来实现自适应的两栏布局，其中一个BFC用于固定宽度的侧边栏，另一个BFC用于自适应宽度的主体内容。
处理浮动元素周围的布局问题：浮动元素会导致周围元素的布局异常，可以创建一个BFC来包裹浮动元素，从而解决布局问题。

总的来说，BFC机制在网页布局中起到了重要作用，它可以控制元素的位置、避免布局问题，并提供了更好的灵活性和可控性。

2.css盒模型

作者：梁木由
链接：juejin.cn/post/720263…
标准（W3C）盒子模型：width = 内容宽度（content） + border + padding + margin

低版本IE盒子模型： width = 内容宽度（content + border + padding）+ margin

图片展示:

区别：标准盒子模型盒子的height和width是content（内容）的宽高，而IE盒子模型盒子的宽高则包括content+padding+border部分。

3.div水平垂直居中

(1) 使用 CSS Flexbox 属性实现居中对齐：

HTML：

<div class="container">
  <div class="centered-div">内容</div>
</div>

CSS：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

(2) 使用绝对定位和 transform 属性实现居中对齐：

CSS：

.container {
  position: relative;
}

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

(3) 使用表格布局（display: table）实现居中对齐：

HTML：

<div class="table-container">
  <div class="table-cell">
    <div class="centered-div">内容</div>
  </div>
</div>

CSS：

.table-container {
  display: table;
  width: 100%;
  height: 100%;
}

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

(4) 使用绝对定位和负边距实现居中对齐：

HTML：

<div class="container">
  <div class="centered-div">内容</div>
</div>

CSS：

.container {
  position: relative;
}

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
}

(5) 使用 Grid 布局实现居中对齐：

HTML：

<div class="container">
  <div class="centered-div">内容</div>
</div>

CSS：

.container {
  display: grid;
  place-items: center;
}

4.css实现三角形

    * {margin: 0; padding: 0;}
    .content {
        width:0;
        height:0;
        margin:0 auto;
        border:50px solid transparent;
        border-top: 50px solid pink;
    }

html: 
    <div class="content"></div>

5.min-width/max-width 和 min-height/max-height 属性间的覆盖规则？

覆盖优先级: min-width > max-width > width

6.rem em vh vw

rem 是 CSS3 新增的相对长度单位，是指相对于根元素 html 的 font-size 计算值的大小。

默认根元素的 font-size 都是 16px的。如果想要设置 12px 的字体大小也就是 12px/16px = 0.75rem。

em em单位是相对于父元素的字体大小进行计算的。如果一个元素自身的字体大小设置为1em，那么它的大小就是相对于父元素的字体大小决定的。例如，如果父元素的字体大小是16px，那么1em就等于16px。em单位也可以用于其他CSS属性，例如margin、padding和宽度等。

vh（viewport height）：vh单位是相对于视口高度的百分比计算的。视口高度是指用户可见区域的高度，1vh表示视口高度的1%。通过vh单位可以实现根据视口高度进行自适应的效果，例如创建一个占满整个视口高度的元素。

vw（viewport width）：vw单位是相对于视口宽度的百分比计算的。视口宽度是指用户可见区域的宽度，1vw表示视口宽度的1%。通过vw单位可以实现根据视口宽度进行自适应的效果，例如创建一个占满整个视口宽度的元素。

7. CSS优化、提高性能的方法有哪些？

多个css可合并，并尽量减少http请求
属性值为0时，不加单位
将css文件放在页面最上面
避免后代选择符，过度约束和链式选择符
使用紧凑的语法
避免不必要的重复
使用语义化命名，便于维护
尽量少的使用!impotrant，可以选择其他选择器
精简规则，尽可能合并不同类的重复规则
遵守盒子模型规则

8.有哪几种隐藏元素的方法？

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间依然存在；
opacity: 0;``CSS3属性，设置0可以使一个元素完全透明；
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外；
display: none; 元素会变得不可见，并且不会再占用文档的空间；
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留；
<div hidden="hidden"> HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态；
height: 0; 将元素高度设为 0 ，并消除边框；
filter: blur(0); CSS3属性，括号内的数值越大，图像高斯模糊的程度越大，到达一定程度可使图像消失；

9.什么是回流（重排）和重绘以及其区别？

回流（reflow，也称为重排）和重绘（repaint）都是浏览器渲染页面时的性能消耗操作。

回流（重排）是指当DOM元素的几何属性发生变化，影响了元素的布局时，浏览器需要重新计算并应用所有元素的几何属性，然后重新构建页面的布局树，这个过程称为回流。回流的开销比较大，会触发页面的重新渲染。

重绘（repaint）是指当元素的样式发生变化但不影响布局时，浏览器只需要重新绘制元素的外观，而不需要进行重新布局。重绘的开销相对较小，但仍然会耗费一定的性能。

它们的区别在于：

回流（重排）是计算并应用所有元素的几何属性，并重新构建页面的布局树，消耗较大的性能。
重绘（repaint）只是重新绘制元素的外观，不需要计算布局，性能开销相对较小。

一些操作可能会导致回流或重绘，例如改变元素的尺寸、位置、添加或删除元素等。为了提高性能，需要尽量避免频繁的回流和重绘操作。常见的优化策略包括：

使用 CSS3 的 transform 属性代替改变元素的位置和尺寸。
使用 CSS3 的 opacity 属性代替改变元素的可见性。
批量修改DOM元素，避免多次触发回流和重绘。
使用flexbox布局等高效的布局方式。
使用文档片段（DocumentFragment）来减少DOM操作次数。

回流（重排）的性能消耗比重绘更大的原因主要有两个：

回流需要重新计算布局：回流是浏览器重新计算并应用所有元素的几何属性，并重新构建页面的布局树。这个过程涉及到对页面中所有元素的计算和布局操作，因此开销较大。它需要考虑元素的尺寸、位置、边距、浮动等属性的改变，并重新计算元素的大小和位置关系。
回流会触发其他操作：回流的发生可能会导致其他操作的触发。例如，如果一个元素的大小发生了变化，那么它所包含的内容可能需要重新计算布局或进行重绘。这会导致一系列的连锁反应，进一步增加性能开销。

相比之下，重绘只涉及元素外观的改变，而不需要重新计算布局。它仅需要更新元素的绘制指令，将新的样式应用于元素的外观，因此开销较小。当然，请参考以下10道CSS基础面试题及其答案：

10. CSS中的position属性的取值有哪些？请解释它们的含义。

CSS中position属性的常见取值有：static（默认值，元素按照正常文档流进行定位）、relative（相对定位，相对于元素本身的位置）、absolute（绝对定位，相对于最近的已定位祖先元素）和 fixed（固定定位，相对于浏览器窗口进行定位）。

11. CSS中的display属性有哪些常见取值？它们的特点是什么？

常见的display属性取值有：block（元素会独占一行）、inline（元素不会独占一行，宽度由内容决定）、inline-block（元素不会独占一行，但是可以设置宽度和高度）和 none（元素不会被渲染）。它们的特点主要体现在元素的布局行为和占据空间的方式上。

12.CSS选择器的权重是如何计算的？请举例说明。

CSS选择器的权重是通过一定的规则计算的，通常由四个部分组成：内联样式、ID选择器、类选择器和标签选择器。

权重计算的规则：

内联样式：给定元素的style属性中的样式具有最高权重，权重值为1000。
ID选择器：每个ID选择器的权重为100。
类选择器、伪类选择器和属性选择器：每个类选择器、伪类选择器和属性选择器的权重为10。
标签选择器和伪元素选择器：每个标签选择器和伪元素选择器的权重为1。

计算方法：

将上述四个部分的权重值相加，得到选择器的总权重。
当多个选择器应用于同一个元素时，根据权重的大小确定哪个样式将被应用。
- 如果选择器的权重相同，则后出现的样式将覆盖先出现的样式。
- 如果选择器的权重不同，则权重较高的样式将覆盖权重较低的样式。

13. CSS预处理器 less sass

Sass和Less是两种常见的CSS预处理器，它们有以下几个区别：

语法：Sass使用的是缩进型语法，使用缩进和嵌套来表示层级关系，而Less使用的是类似于CSS的语法，使用大括号和分号来表示层级关系。
变量符号：Sass使用美元符号$作为变量的前缀，例如$color: red;，而Less使用at符号@作为变量的前缀，例如@color: red;。
混合（Mixin）：Sass使用@include关键字来引用和调用混合，例如@include my-mixin;，而Less使用.mixin来定义混合，例如.mixin; 来引用。
循环：Sass具有强大的控制流功能，包括for循环和while循环，可以更灵活地生成样式，而Less的循环功能相对较弱，只支持简单的for循环。
运算符：Sass支持数学运算和逻辑运算，可以在样式中进行加减乘除和比较等操作，而Less的运算能力相对较弱，只支持简单的加减乘除运算。

总的来说，Sass在功能上更加强大、灵活，语法上使用的是缩进型语法；而Less在语法上更接近CSS，并且语法相对简单。选择使用哪种预处理器可以根据个人偏好、项目需求和团队约定来决定。

14. 伪类和伪元素

伪类（pseudo-class）和伪元素（pseudo-element）都是CSS中用于选择文档中的特定元素或元素的特定部分的选择器。它们使用不同的语法和表示方式，具有不同的作用和应用场景。

伪类（pseudo-class）:
- 伪类是用于选择元素的特定状态或位置的选择器。
- 伪类使用单冒号（:）来表示，如:hover、:active、:first-child等。
- 伪类可以选择那些具有特定属性值、处于特定位置或特定状态的元素。
- 伪类可以通过与其他选择器进行组合来选择目标元素。例如，选择第一个子元素的伪类可以与父元素的选择器组合使用，如div:first-child。
伪元素（pseudo-element）:
- 伪元素是用于在元素的特定部分中添加样式的选择器。
- 伪元素使用双冒号（::）来表示，如::before、::after等。
- 伪元素可以在元素的内容之前或之后插入生成的内容，并且可以通过CSS样式来进行美化。
- 伪元素通常用于添加装饰性的元素或修改元素的布局，而不是通过实际在HTML结构中添加额外的元素来实现。

伪类的应用：
- :hover 选择鼠标悬停状态下的元素。
- :first-child 选择作为其父元素的第一个子元素的元素。
- :nth-child(odd) 选择作为其父元素的奇数位置的子元素。
伪元素的应用：
- ::before 在元素的内容之前插入生成的内容。
- ::after 在元素的内容之后插入生成的内容。

部分题目来源Web 中高级前端面试题集合（200+） - 掘金 (juejin.cn) 金三银四，我为面试所准备的100道面试题以及答案，不看要遭老罪喽 - 掘金 (juejin.cn) 持续更新,欢迎补充

2023-CSS面试题总结

CSS篇

1.介绍下BFC机制 及其应用

2.css盒模型

3.div水平垂直居中

4.css实现三角形

5.min-width/max-width 和 min-height/max-height 属性间的覆盖规则？

6.rem em vh vw

7. CSS优化、提高性能的方法有哪些？

8.有哪几种隐藏元素的方法？

9.什么是回流（重排）和重绘以及其区别？

10. CSS中的position属性的取值有哪些？请解释它们的含义。

11. CSS中的display属性有哪些常见取值？它们的特点是什么？

12.CSS选择器的权重是如何计算的？请举例说明。

13. CSS预处理器 less sass

14. 伪类和伪元素

1.介绍下BFC机制及其应用