面试 CSS 框架八股文十问十答第五期

面试 CSS 框架八股文十问十答第五期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）使用 clear 属性清除浮动的原理？

使用 clear 属性清除浮动的原理是通过设定元素的 clear 属性来指定元素的边框不能与之前的浮动元素相邻。clear 属性有以下几个取值：

• clear: left：表示元素的边框不能与左边的浮动元素相邻。
• clear: right：表示元素的边框不能与右边的浮动元素相邻。
• clear: both：表示元素的边框不能与任何浮动元素相邻。

2）对BFC的理解，如何创建BFC

• BFC（块级格式化上下文）是一种页面渲染的一部分，它是一个独立的渲染区域，具有一系列的特性。BFC的主要特性包括：

  • 内部的 Box 会在垂直方向上一个接一个地放置。
  • Box 在垂直方向上的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
  • BFC 的区域不会与浮动元素的 Box 重叠。
  • BFC 是一个独立的容器，容器里面的子元素不会影响到外部元素。

  可以通过以下方式来创建 BFC：

  • 设置元素的 float 属性为 left 或 right。
  • 设置元素的 position 属性为 absolute 或 fixed。
  • 设置元素的 display 属性为 inline-block、table-cell、table-caption 或 flex。
  • 设置元素的 overflow 属性不为 visible。

3）什么是margin重叠问题？如何解决？

margin重叠问题指的是当两个毗邻的元素的 margin 值相遇时，它们的 margin 会重叠在一起，造成间距变小的现象。解决这个问题的方法有：

• 通过给其中一个元素添加 padding 或 border 来分隔 margin，使它们不再相邻。
• 使用 clear 属性清除浮动，从而创建一个新的 BFC，使两个元素处于不同的 BFC 中，从而解决 margin 重叠的问题。

4）元素的层叠顺序

元素的层叠顺序是指在页面渲染时，元素的显示顺序。在默认情况下，元素根据其在 HTML 中的位置来进行层叠，后面的元素会覆盖前面的元素。但是可以通过设置元素的 position 属性和 z-index 属性来控制层叠顺序。层叠顺序从大到小依次为：

• position: fixed 或 position: sticky 的元素。
• position: absolute 或 position: relative，并且具有非 static 的 z-index 值的元素。
• position: static 或 position: relative 的元素。

5）position的属性有哪些，区别是什么

position 的属性有以下几种：

• static：元素的默认定位方式，遵循正常的文档流。
• relative：相对定位，相对于元素原本的位置进行定位，不会影响其他元素的位置。
• absolute：绝对定位，相对于最近的非 static 定位祖先元素进行定位，如果没有非 static 定位的祖先元素，则相对于文档进行定位。
• fixed：固定定位，相对于浏览器窗口进行定位，不会随滚动而改变位置。
• sticky：粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位。

6）display、float、position的关系

display、float、position 是 CSS 中用于控制元素布局和定位的属性，它们之间的关系如下：

• display 控制元素的显示方式，可以设置为 block、inline、inline-block 等。它不会影响元素的定位。
• float 属性用于使元素浮动，可以将元素从正常的文档流中脱离出来，使其他元素环绕在其周围。设置 float 后，元素的 display 值将自动变为 block。
• position 属性用于控制元素的定位方式，可以设置为 static、relative、absolute、fixed。它可以改变元素的 display 值，使元素根据指定的定位方式进行布局。

7）absolute与fixed共同点与不同点

absolute 和 fixed 都是用于控制元素定位的属性，它们的共同点是：

• 都可以将元素从正常的文档流中脱离出来。
• 都可以通过 top、right、bottom、left 属性来指定元素相对于某个参考点的偏移位置。

它们的不同点是：

• absolute 定位是相对于最近的非 static 定位祖先元素进行定位，如果没有非 static 定位的祖先元素，则相对于文档进行定位。而 fixed 定位是相对于浏览器窗口进行定位，不会随滚动而改变位置。
• absolute 定位的元素在文档流中仍占据原来的位置，而 fixed 定位的元素不占据原来的位置，会覆盖其他元素。

8）对 sticky 定位的理解

sticky 定位是一种特殊的定位方式，元素在跨越特定阈值前为相对定位，之后为固定定位。可以通过设置 top、right、bottom、left 属性来指定元素相对于指定的边界框的偏移位置。sticky 定位的元素会在滚动过程中保持在指定位置，直到滚动到边界框的顶部或底部。

9）实现一个三角形

实现一个三角形可以通过设置元素的 border 属性来实现。例如，可以设置一个矩形容器，然后将其某一边的 border 设置为透明，另外三边的 border 设置为有颜色的实线，就可以实现一个三角形。

10）实现一个扇形

实现一个扇形可以通过设置元素的背景色和 border-radius 属性来实现。首先，通过设置元素的圆角半径为50%，使元素变成一个圆形。然后，通过设置元素的背景色和 border-radius 属性，只显示圆形的一部分，就可以实现一个扇形效果。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐