分享一些我在面试时所遇到的CSS问题 (五)

前言

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

css画一个三角形

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

html 复制代码
<div class="box"></div>

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

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

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

css 复制代码
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的属性,就可以画出三角形了

css 复制代码
.box{
      border: 50px solid;
      border-color: transparent transparent transparent #13cfeb;
    }

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

如何画出一个直角扇形?

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

css 复制代码
.box{
    box-radius: 50%;
 }

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

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

  1. display: none

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

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

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

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

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

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

css 复制代码
    .box{
         position: absolute;
         left: -99999px;
         top: -99999px;
        }
  1. clip-path: circle(0%);

    • 特点:元素仍然占据页面空间,但是被裁剪为一个圆,半径为0,因此不可见。
    • 响应事件:无法响应事件,因为元素不可见。
    • 对性能影响:仅触发重绘,不会触发回流,因为元素仍然存在于文档中,不影响布局。
相关推荐
脑袋大大的15 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0124 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
没有bug.的程序员2 小时前
JAVA面试宝典 -《安全攻防:从 SQL 注入到 JWT 鉴权》
java·安全·面试
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js