前言

在前端面试中，CSS是一个非常重要的考察点，因为它是构建网页界面和用户交互的关键技术之一。年也算过完了，又到了春招的时候，这是一个检验成果的阶段，接下来我会陆续分享一下我在面试时所遇到的与CSS有关的问题。祝大家在接下来的春招中取得一个好成绩！

css画一个三角形

很多小伙伴们看到这个问题，估计都会跟博主我一样感到懵逼，如何使用css画一个三角形？听到画可能很多小伙伴们会觉得很难很复杂，但实则不难。我们先来看一段代码：

<div class="box"></div>

我们给这个名为box的容器添加一段样式

.box{
      border: 50px solid;
      border-color: #5411f1 #ba0e0e #12f325 #13cfeb;
    }

在此之前，为了更好的展示效果，我们先将容器居中：

body{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
     }

• height: 100vh;：将body的高度设置为视口的高度（viewport height），即整个窗口的高度。
• display: flex;：使用Flex布局。
• justify-content: center;：水平居中对齐flex项目。
• align-items: center;：垂直居中对齐flex项目。

如代码所示，我们给box容器添加一段50px的边框，并给边框的上下左右都设置为不同的颜色，然后内容区不设置宽度和高度，让我们来看看效果：

我们可以看到四个不同颜色的边框构成了一个正方形，而每一个不同颜色的边框都是一个三角形，之后我们只用给边框添加一个transparent的属性，就可以画出三角形了

.box{
      border: 50px solid;
      border-color: transparent transparent transparent #13cfeb;
    }

如图，我们将边框的上右下都设置为了透明属性transparent，就画出了一个三角形。

如何画出一个直角扇形？

在我们画出了一个三角形后，面试官可能又会问我们如何画出一个直角扇形，这其实也很简单，这只要在上面代码的基础上，将box加上一个百分之五十的圆角

.box{
    box-radius: 50%;
 }

就可以画出一个直角扇形了！

css中有哪些方式可以隐藏页面元素？区别是什么？

1. display: none

   • 特点：将元素完全从文档流中移除，不占据页面空间。
   • 响应事件：无法响应事件，因为元素已经从文档中移除。
   • 对性能影响：会触发回流和重绘，因为元素从文档中移除，影响页面布局和样式。

2. visibility: hidden

   • 特点：元素仍然占据页面空间，但是不可见。
   • 响应事件：无法响应事件，因为元素不可见。
   • 对性能影响：仅触发重绘，不会触发回流，因为元素仍然存在于文档中，不影响布局。

3. opacity: 0;

   • 特点：元素仍然占据页面空间，但是不可见。
   • 响应事件：可以响应事件，因为元素仍然存在于文档中。
   • 对性能影响：根据具体情况而定。若跟animation搭配使用，则不产生重绘

4. position: absolute;

   • 特点：将元素脱离文档流，不再占据原来的位置，可以自由定位。

   • 响应事件：无法响应事件，元素将在不可看见的位置

   • 对性能影响：会触发回流和重绘，因为元素脱离了文档流，可能会影响页面布局。

    .box{
         position: absolute;
         left: -99999px;
         top: -99999px;
        }

1. clip-path: circle(0%);

   • 特点：元素仍然占据页面空间，但是被裁剪为一个圆，半径为0，因此不可见。
   • 响应事件：无法响应事件，因为元素不可见。
   • 对性能影响：仅触发重绘，不会触发回流，因为元素仍然存在于文档中，不影响布局。