CSS面试题常用知识总结day03

news2024/11/17 8:48:34

大家好我是没钱的君子下流坯，用自己的话解释自己的知识
前端行业下坡路，甚至可说前端已死，我还想在前段行业在干下去，所以从新开始储备自己的知识。
从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 是什么？为什么要用它？

Less 和 Sass 被称之为 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：指定动画是否正在运行或已暂停。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

STM32F103C8T6-CAN

STM32F103C8T6-CAN

本文内容 HAL库下printf重定向解决问题&#xff1a;Keil下调试可以正常运行&#xff0c;而下载后运行不了CAN总线的回环测试&#xff0c;自发自收 printf重定向 实现printf重定向的目的是方便调试&#xff0c;通过UART查看打印的调试信息。 下面以STM32F103C8T6为例&#xf…
阅读更多...
【前沿模型解析】潜在扩散模 1 | LDM第一阶段-感知图像压缩总览

【前沿模型解析】潜在扩散模 1 | LDM第一阶段-感知图像压缩总览

文章目录 0 开始~1 感知压缩的目的2 自回归编码器-解码器生成模型一览2.1 AE 自编码器2.2 VAE 变分自编码器2.3 VQ-VAE2.4 VQ-GAN 3 代码部分讲解总览 0 开始~ 从今天起呢&#xff0c;我们会剖析LDM&#xff08;潜在扩散模型&#xff09; 从去年开始&#xff0c;大量的生成模…
阅读更多...
数学建模-------MATLAB分支循环断点调试

数学建模-------MATLAB分支循环断点调试

1.if语句 &#xff08;1&#xff09;分段函数的引入&#xff08;这里的数据表示的是分数的不同区间对应的等级&#xff09; (1)这个就是一个十分简单的if语句&#xff0c;无论是if还是elseif后面都是不能添加任何分号的&#xff0c;这个例子就是一个分段的函数&#xff0c;在不…
阅读更多...
基础总结篇：Activity生命周期

基础总结篇：Activity生命周期

private int param 1; //Activity创建时被调用 Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Log.i(TAG, “onCreate called.”); setContentView(R.layout.lifecycle); Button btn (Button) findViewById(R.id.…
阅读更多...
医药行业痛点以及OKR解决方案

医药行业痛点以及OKR解决方案

一、背景 随着医药行业的快速发展和市场竞争的加剧&#xff0c;企业面临着前所未有的挑战和机遇。为了在激烈的市场竞争中立于不败之地&#xff0c;某知名医药企业决定引入OKR&#xff08;Objectives and Key Results&#xff0c;目标与关键成果&#xff09;管理模式&#xff0…
阅读更多...
Gradle入门初探

Gradle入门初探

一、Gradle简介&#xff1a; 我们都创建过基于Maven的项目&#xff0c;maven可以很好的管理项目的依赖&#xff0c;编译和打包项目&#xff0c;Gradle是一个和Maven类似的自动化构建工具&#xff0c;Maven是基于xml文件格式&#xff0c;而Gradle是基于Groovy的语言&#xff0c…
阅读更多...
dm8数据迁移工具DTS

dm8数据迁移工具DTS

dm8数据迁移工具DTS DTS工具介绍 DM数据迁移工具提供了主流大型数据库迁移到DM、DM到DM、文件迁移到DM以及DM迁移到文件的功能。DM数据迁移工具采用向导方式引导用户通过简单的步骤完成需要的操作。 DM数据迁移工具支持&#xff1a; ◆ 主流大型数据库Oracle、SQLServer、MyS…
阅读更多...
Advanced RAG 01：讨论未经优化的 RAG 系统存在的问题与挑战

Advanced RAG 01：讨论未经优化的 RAG 系统存在的问题与挑战

编者按&#xff1a; 自 2023 年以来&#xff0c;RAG 已成为基于 LLM 的人工智能系统中应用最为广泛的架构之一。由于诸多产品的关键功能严重依赖RAG&#xff0c;优化其性能、提高检索效率和准确性迫在眉睫&#xff0c;成为当前 RAG 相关研究的核心问题。 我们今天为大家带来的这…
阅读更多...
【无标题】【Android】Android中Intent的用法总结

【无标题】【Android】Android中Intent的用法总结

2.显示地图: Java代码 Uri uri Uri.parse(“geo:38.899533,-77.036476”); Intent it new Intent(Intent.Action_VIEW,uri); startActivity(it); 3.从google搜索内容 Java代码 Intent intent new Intent(); intent.setAction(Intent.ACTION_WEB_SEARCH); intent.pu…
阅读更多...
SAP操作教程第16期：SAP B1关于审批模块的设置

SAP操作教程第16期：SAP B1关于审批模块的设置

工作效率是企业的生存之本&#xff0c;也是员工能够在企业中发展之本。自动化和规范化的审批流程可以减少手动操作以及沟通环节、节约时间和资源从而提高工作效率。 所以&#xff0c;今天我们就一起来了解一下SAP B1中关于审批模块的设置。 01关于审批模块的设置 第一步&#x…
阅读更多...
数据结构基础：双链表结构、实现

数据结构基础：双链表结构、实现

继续和颦颦学C语言呀.......> 双链表的结构 这里的head 为头节点&#xff0c;是‘哨兵位’&#xff0c;实际不存储任何有效的数据 它的存在是为了遍历环链表避免死循环 双链表的实现 typedef int LTDataType; typedef struct ListNode { struct ListNode* next; //指针保存…
阅读更多...
为什么使用MQ？？？？

为什么使用MQ？？？？

1、异步处理 场景说明&#xff1a;用户注册后&#xff0c;需要发注册邮件和注册短信,传统的做法有两种 1.串行的方式 2.并行的方式。 串行方式: 将注册信息写入数据库后,发送注册邮件,再发送注册短信,以上三个任务全部完成后才返回给客户端。 这有一个问题是,邮件,短信并不是…
阅读更多...
2024/4/1—力扣—二叉树的最近公共祖先

2024/4/1—力扣—二叉树的最近公共祖先

代码实现&#xff1a; 思路&#xff1a; 递归判断左子树和右子树&#xff0c;查找p或者q是否在当前节点的子树上 1&#xff0c;在同一子树上&#xff0c;同一左子树&#xff0c;返回第一个找到的相同值&#xff0c;同一右子树上&#xff0c;返回第一个找到的相同值 2&#xff0…
阅读更多...
【每日刷题】Day4

【每日刷题】Day4

【每日刷题】Day4 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; 目录 1. 83. 删除排序链表中的重复元素 - 力扣&#xff08;LeetCode&#xff09; 2. 88. 合并两个有序数组 - 力扣&#xff08;LeetCode&…
阅读更多...
Windows SDK（六）组合框与列表框控件

Windows SDK（六）组合框与列表框控件

组合框和列表框同样也是控件&#xff0c;所以我们在应用组合框和列表框时同样也需要父窗口&#xff0c;现在我们以 创建项目时程序自行创建的窗口作为父窗口展开如下的控件创建与应用 在进行组合框与列表框的讲解前&#xff0c;我们首先在程序中定义几个宏作为我们在编写程序…
阅读更多...
C语言：顺序表专题

C语言：顺序表专题

目录 一、数据结构之顺序表/链表1.数据结构相关概念1.1什么是数据结构1.2为什么需要数据结构 二、顺序表1.顺序表的概念及结构2.顺序表分类3.动态顺序表的实现 一、数据结构之顺序表/链表 1.数据结构相关概念 1.1什么是数据结构 数据结构是由“数据”和“结构”两词组合而来…
阅读更多...
【优选算法专栏】专题十六：BFS解决最短路问题（一）

【优选算法专栏】专题十六：BFS解决最短路问题（一）

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…
阅读更多...
云his系统源码 java源码saas模式 二甲医院his系统全套源码 数据库MySQL + MyCat

云his系统源码 java源码saas模式 二甲医院his系统全套源码 数据库MySQL + MyCat

基层医院云HIS系统源码 一款满足基层医院各类业务需要的云HIS系统。该系统能帮助基层医院完成日常各类业务&#xff0c;提供病患挂号支持、病患问诊、电子病历、开药发药、会员管理、统计查询、医生站和护士站等一系列常规功能&#xff0c;还能与公卫、PACS等各类外部系统融合&…
阅读更多...
0基础学习python

0基础学习python

0基础如何进入IT行业&#xff1f; 建议先掌握以下&#xff1a; 编程环境的安装和使用输出输入语句、变量、表达式的理解和使用选择结构、循环结构的理解和使用列表的使用文件的操作函数的调用库的安装和使用 编程&#xff0c;其实就是利用特定的语言控制计算机、或者就是与计算…
阅读更多...
如何把音乐播放速度慢下来？享受慢音乐的两个方法

如何把音乐播放速度慢下来？享受慢音乐的两个方法

一&#xff0c;前言 在现代社会&#xff0c;我们生活在一个快节奏的环境中&#xff0c;时间仿佛被压缩成了碎片&#xff0c;每个人都在匆匆忙忙地追求着速度和效率。然而&#xff0c;有时放慢脚步&#xff0c;让心灵回归宁静&#xff0c;成为了一种难得的奢侈。 音乐&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023