CSS面试题常用知识总结day03

大家好我是没钱的君子下流坯,用自己的话解释自己的知识
前端行业下坡路,甚至可说前端已死,我还想在前段行业在干下去,所以从新开始储备自己的知识。
从CSS——>Javascript——>VUE2——>Vuex、VueRouter、webpack——>VUE3——>pinia、Vite把前端基本的从新顺一遍,找出自己的不足。再去把一些组件给仔细研究一些自己以前没有发现的细节使用方法。
希望大家都能找到自己的出路。

21. 选择器的权重计算方式

!important 最高,* 为0,行内样式 A 组加一,id 选择器 B 组加一,类、伪类、属性选择器 C 组加一,元素、伪元素 D 组加一。在这里插入图片描述

22. 如何避免重绘或者重排

首先会触发重绘重排的事件

任何改变用来构建渲染树的信息都会导致一次重排或重绘:

  • 添加、删除、更新DOM节点
  • 通过display: none隐藏一个DOM节点-触发重排和重绘
  • 通过visibility: hidden隐藏一个DOM节点-只触发重绘,因为没有几何变化
  • 移动或者给页面中的DOM节点添加动画
  • 添加一个样式表,调整样式属性
  • 用户行为,例如调整窗口大小,改变字号,或者滚动。

我们往往通过改变 class 的方式来集中改变样式

// 判断是否是黑色系样式
const theme = isDark ? 'dark' : 'light'

// 根据判断来设置不同的class
ele.setAttribute('className', theme)
  1. 使用 DocumentFragment

我们可以通过createDocumentFragment创建一个游离于DOM树之外的节点,然后在此节点上批量操作,最后插入DOM树中,因此只触发一次重排

var fragment = document.createDocumentFragment();

for (let i = 0;i<10;i++){
  let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}

document.body.appendChild(fragment);

23.如何优化图片

  1. 对于很多装饰类图片,尽量不用图片,因为这类修饰图片完全可以用 CSS 去代替。

  2. 对于移动端来说,屏幕宽度就那么点,完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载,可以计算出适配屏幕的宽度,然后去请求相应裁剪好的图片。

  3. 小图使用 base64 格式

  4. 将多个图标文件整合到一张图片中(雪碧图)

  5. 选择正确的图片格式:

  • 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量,缺点就是兼容性并不好
  • 小图使用 PNG,其实对于大部分图标这类图片,完全可以使用 SVG 代替
  • 照片使用 JPEG

24. CSS3 新增了那些东西

CSS3 新增东西众多,这里列举出一些关键的新增内容:

  • 选择器
  • 盒子模型属性:border-radius、box-shadow、border-image
  • 背景:background-size、background-origin、background-clip
  • 文本效果:text-shadow、word-wrap
  • 颜色:新增 RGBA,HSLA 模式
  • 渐变:线性渐变、径向渐变
  • 字体:@font-face
  • 2D/3D转换:transform、transform-origin
  • 过渡与动画:transition、@keyframes、animation
  • 多列布局
  • 媒体查询

25. 实现一根只有 1px 的长线

参考答案:

实现的方式很多,下面是一种参考方案:

.line {
width: 100%;
height: 1px;
overflow: hidden;
font-size: 0px; 
border-bottom: dashed 1px #ccc;
}
<div class="line"></div>

26.bootstrap响应式原理

bootstrap使用的是栅格布局,栅格布局的原理就是通过定义容器大小把页面分成12份再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。

27.less、sass 是什么?为什么要用它?

LessSass 被称之为 CSS 预处理器。

CSS 预处理器可以为 CSS 增加变编程特性,通过编译器将使用新语法的文件输出为一个 CSS 文件,解决 CSS 难以复用、代码冗余、可维护性低的缺点。常见的预处理器有 less、sass、stylus

使用他们来书写 CSS 代码可以更符合编程思维、简化代码、提高代码重用、便于维护。

28.什么是选择器?有哪些选择器?

选择器决定将样式应用在哪个或哪些元素身上。

  • 元素选择器:例如 div{…} p{…}
  • id 选择器: 例如 #box{…}
  • 类选择器: 例如 .box{…}
  • 属性选择器:[href=“#”]{…}
  • 通配:*{…}
  • 组合(并集)选择器:div,p,a,.main{…}
  • 交集选择器:input[type=“text”]{…}
  • 后代选择器:header nav{…}
  • 子级选择器: ul>li{…}
  • 伪类选择器:
    • :nth-child(num){…}
    • :nth-child(odd){…}
    • :nth-child(even){…}
    • :nth-of-type{…}
    • :first-child{…}
    • :last-child{…}
    • only-child{…}
    • a:link{…}
    • a:visited{…}
    • :hover{…}
    • a:active{…}
  • 伪元素选择器:
    • ::before{…}
    • ::after{…}
    • ::first-letter{…}
    • ::first-line{…}

29.CSS 的计算属性

calc( ) 函数
主要用于指定元素的长度,支持所有 CSS 长度单位,运算符前后都需要保留一个空格。

比如: width: calc(100% - 50px);

30. transition、transform、animate 的区别

transition:过渡效果,它有4个属性:

transition: property duration timing-function delay;
  • property :css属性的名称

  • duration :多长时间完成

  • timing-function:转速曲线

  • delay:开始的时候。

transform: 应用于元素的 2D 或 3D 转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

  • 旋转:rotate
  • 缩放:scale
  • 移动:translate
  • 倾斜:skew

animate:应用动画效果。语法如下:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  • name :定义的名称
  • duration :多长时间完成
  • delay :开始前多长的延迟
  • iteration-count:播放几次
  • direction :指定是否应该轮流反向播放动画。
  • fill-mode:结束的状态
  • play-state:指定动画是否正在运行或已暂停。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/520337.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

聚能共创下一代智能终端操作系统 软通动力荣膺“OpenHarmony优秀贡献单位”

近日&#xff0c;由开放原子开源基金会指导&#xff0c;以“开源共享未来”为主题的OpenHarmony社区年会在北京成功举办。本次活动汇集OpenHarmony项目群共建单位及生态伙伴等多方力量&#xff0c;旨在对2023年度OpenHarmony年度开源事业全面总结的同时&#xff0c;吸引更多伙伴…

【Java EE】SpringBoot的创建与简单使用

文章目录 &#x1f340;环境准备&#x1f333;Maven&#x1f332;SpringBoot是什么&#x1f384;Spring Boot 项目创建&#x1f338;使用Idea创建&#x1f338;创建SpringBoot项⽬&#x1f338;SpringBoot项目的运行 ⭕总结 &#x1f340;环境准备 如果你的IDEA是专业版&#…

STM32F103/F407/H743不同GPIO速度配置(HAL库)对应的最高速度

0 前言 如果我们只是使用MCU控制LED的亮灭&#xff0c;完全可以不关心GPIO的速度配置。但如果我们使用到了SPI、MII、RMII、FSMC等这些高速总线就必须要清楚每种GPIO速度配置对应的最高速度&#xff0c;避免因为GPIO速度配置过低导致总线速度提不上去。 既然如此&#xff0c;那…

Linux网络基础 (三) —— Socket

文章目录 Socket 编程基本概念Socket背景Socket 为了解决什么问题 socketsockaddr结构sockaddrsockaddr_insockaddr 和 sockaddr_in 的关系sockaddr_un 示例代码 &#x1f396; 博主的CSDN主页&#xff1a;Ryan.Alaskan Malamute &#x1f4dc; 博主的代码仓库主页 [ Gitee ]&…

OpenHarmony实战:Combo解决方案之ASR芯片移植案例

本方案基于 OpenHarmony LiteOS-M 内核&#xff0c;使用 ASR582X 芯片的 DEV.WIFI.A 开发板进行开发移植。作为典型的 IOT Combo&#xff08;Wi-FiBLE&#xff09;解决方案&#xff0c;本文章介绍 ASR582X 的适配过程。 编译移植 目录规划 本方案的目录结构使用 Board 和 So…

C和C++内存管理

目录&#xff1a; 一&#xff1a;C和C内存分布 二&#xff1a;C动态内存管理方式 三&#xff1a;C动态内存管理方式 四&#xff1a;operator new与operator delete函数 五&#xff1a;new和delete的实现原理 六&#xff1a;定位new表达式(placement-new) 七&#xff1…

如何利用Flutter将应用成功上架至iOS平台:详细指南

引言 &#x1f680; Flutter作为一种跨平台的移动应用程序开发框架&#xff0c;为开发者提供了便利&#xff0c;使他们能够通过单一的代码库构建出高性能、高保真度的应用程序&#xff0c;同时支持Android和iOS两个平台。然而&#xff0c;完成Flutter应用程序的开发只是第一步…

如何卸载干净 IDEA(图文讲解)

更新时间 2022-12-20 11:一则或许对你有用的小广告 星球 内第一个项目&#xff1a;全栈前后端分离博客项目&#xff0c;演示地址&#xff1a;Weblog 前后端分离博客, 1.0 版本已经更新完毕&#xff0c;正在更新 2.0 版本。采用技术栈 Spring Boot Mybatis Plus Vue 3.x Vit…

【Consul】基于Golang实现Consul服务的注册、注销、修改、监控注册的服务变化、实时同步服务信息机制

【Consul】基于Go实现Consul服务的注册、注销、修改、监控注册的服务变化、实时同步服务信息机制 大家好 我是寸铁&#x1f44a; 总结了一篇【Consul】基于Go实现Consul服务的注册、注销、修改、监控注册的服务变化、实时同步服务信息机制✨ 这应该是目前全网最全的使用golang手…

idea开发 java web 配电室后台管理系统bootstrap框架web结构java编程计算机网页

一、源码特点 java 配电室后台管理系统是一套完善的完整信息系统&#xff0c;结合java web开发和bootstrap UI框架完成本系统 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主 要采用B/S模式开发。 前段主要技术 cs…

Linux:权限篇

文章目录 前言1.用户2.文件的权限管理2.1 修改文件的权限2.2 修改文件的拥有者2.3 修改文件的所属组 3.file指令4.umask指令4.目录的权限管理总结 前言 Linux权限在两个地方有所体现&#xff0c;一种是使用用户&#xff1a;分为root超级用户员与普通用户。另一个是体现在文件的…

单元测试mockito (三)常用方法整理

1.定义测试对象 2.模拟对象依赖 3.注入依赖对象 4.模拟方法依赖 5.调用被测方法 6.验证依赖方法 7.验证数据对象 8.验证依赖对象

基于springboot实现教师工作量管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现教师工作量管理系统演示 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了教师工作量管理系统的开发全过程。通过分析教师工作量管理系统管理的不足&#xff0c;创建了一个计算机管理教师工作…

“Linux 三剑客”,通常指的是三个经典的命令行工具:grep、sed 和 awk

1、grep&#xff1a; 简介&#xff1a;grep 是一个强大的文本搜索工具&#xff0c;可以用于在文件中查找匹配特定模式的行。示例&#xff1a; 搜索包含特定关键词的行&#xff1a; grep "keyword" filename 递归搜索目录下所有文件&#xff1a; grep -r define zj…

软件测试——黑盒测试

黑盒测试也就是针对功能进行测试&#xff0c;白盒测试就是后端根据自己的代码逻辑进行一下自测&#xff0c;灰盒测试就是黑盒和白盒的混合测试。 1.黑盒测试主要发现以下类型的错误 对比需求规格说明书功能遗漏或者不一致。 接口错误 数据库连接访问错误 效率不高&#xff…

计算机语言 之【C++】入门级知识讲解(命名空间,C++输入输出,缺省参数,函数重载,引用,内敛函数,auto关键字,for循环,指针空值nullptr)

三点睡六点起&#xff0c;阎王夸我好身体 不到三点我不睡&#xff0c;太平间里抢C位 一、命名空间 1.命名空间的作用 2.命名空间定义 3.命名空间使用 二、C的输入输出 1.输入输出说明介绍 2.std命名空间的使用惯例 三、缺省参数 1.缺省参数概念 2.缺省参数分类 四、…

STL--vector如何保证元素的连续存储

vector 在 C STL 中保证元素连续存储的方式主要体现在它的内部实现上。具体来说&#xff0c;vector 使用动态分配的数组来存储其元素。这意味着在内存中&#xff0c;vector 的所有元素都被放置在一个连续的内存块中。以下是这种实现的几个关键点&#xff1a; 动态数组&#xf…

Stable Diffusion介绍

Stable Diffusion是一种前沿的开源深度学习模型框架&#xff0c;专门设计用于从文本描述生成高质量的图像。这种称为文本到图像生成的技术&#xff0c;利用了大规模变换器&#xff08;transformers&#xff09;和生成对抗网络&#xff08;GANs&#xff09;的力量&#xff0c;以…

element-ui result 组件源码分享

今日简单分享 result 组件的源码实现&#xff0c;主要从以下三个方面&#xff1a; 1、result 组件页面结构 2、result 组件属性 3、result 组件 slot 一、result 组件页面结构 二、result 组件属性 2.1 title 属性&#xff0c;标题&#xff0c;类型 string&#xff0c;无默…

全文更新:什么是Power Path?充电时是充电器供电还是电池供电?

原文来自微信公众号&#xff1a;工程师看海&#xff0c;与我联系&#xff1a;chunhou0820 看海原创视频教程&#xff1a;《运放秘籍》 昨天的文章误删了一部分&#xff0c;很多同学留言想看全文&#xff0c;现补充、更新如下&#xff1a; 前段时间&#xff0c;交流群里有位同学…