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 是什么？为什么要用它？

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.mzph.cn/news/796276.shtml

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

相关文章

Stale Diffusion、Drag Your Noise、PhysReaction、CityGaussian

Stale Diffusion、Drag Your Noise、PhysReaction、CityGaussian

本文首发于公众号&#xff1a;机器感知 Stale Diffusion、Drag Your Noise、PhysReaction、CityGaussian Drag Your Noise: Interactive Point-based Editing via Diffusion Semantic Propagation Point-based interactive editing serves as an essential tool to compleme…
阅读更多...
vite打包失败 - out of memory

vite打包失败 - out of memory

在做项目时&#xff0c;随着需求的不断增加&#xff0c;我们的代码文件会越来越大&#xff0c;但是在打包时&#xff0c;在 Node 中通过 JavaScript 使用内存的大小却是有限制的。于是&#xff0c;今天打算部署代码时&#xff0c;报错了: <--- JS stacktrace ---> JS st…
阅读更多...
Nuxt 3 项目中配置 Tailwind CSS

Nuxt 3 项目中配置 Tailwind CSS

官方文档&#xff1a;https://www.tailwindcss.cn/docs/guides/nuxtjs#standard 安装 Tailwind CSS 及其相关依赖 执行如下命令&#xff0c;在 Nuxt 项目中安装 Tailwind CSS 及其相关依赖 npm install -D tailwindcss postcss autoprefixerpnpm install -D tailwindcss post…
阅读更多...
VUE必知必会

VUE必知必会

一、简介 Vue.js是一个流行的JavaScript框架&#xff0c;用于构建用户界面和单页应用程序&#xff08;SPA&#xff09;。自2014年由前Google工程师尤雨溪发布以来&#xff0c;Vue迅速获得了广泛的关注和使用&#xff0c;特别是在前端开发领域。 核心特性 响应式数据绑定&#…
阅读更多...
【cpp】快速排序优化

【cpp】快速排序优化

标题&#xff1a;【cpp】快速排序 水墨不写bug 正文开始&#xff1a; 快速排序的局限性&#xff1a; 虽然快速排序是一种高效的排序算法&#xff0c;但也存在一些局限性&#xff1a; 最坏情况下的时间复杂度&#xff1a;如果选择的基准元素不合适&#xff0c;或者数组中存在大…
阅读更多...
vue基本写法

vue基本写法

<p style"margin-left:.0001pt;text-align:justify;">Vue.js 是一种流行的 JavaScript 框架&#xff0c;用于构建用户界面。下面是 Vue.js 的一些标准写法和最佳实践:</p> 1. Vue 实例&#xff1a; 创建 Vue 实例时&#xff0c;可以指定一些选项来定义应…
阅读更多...
Netty 3 - 组件和设计

Netty 3 - 组件和设计

这里将回顾我们之前章节讲到过的主要概念和组件。 1 Channel 、EventLoop和ChannelFuture Channel —— Socket;EventLoop —— 控制流、多线程处理、并发;ChannelFuture —— 异步通知。 1.1 Channel 接口 基本的I/O操作&#xff08;bind()、connect()、read()和write()&a…
阅读更多...
【嵌入式开发 Linux 常用命令系列 4.3 -- git add 不 add untracked file】

【嵌入式开发 Linux 常用命令系列 4.3 -- git add 不 add untracked file】

请阅读【嵌入式开发学习必备专栏 】 文章目录 git add 不add untracked file git add 不add untracked file 如果你想要Git在执行git add .时不添加未跟踪的文件&#xff08;untracked files&#xff09;&#xff0c;你可以使用以下命令&#xff1a; git add -u这个命令只会加…
阅读更多...
boost共享内存使用（3）managed_shared_memory共享内存分配器

boost共享内存使用（3）managed_shared_memory共享内存分配器

文章目录 概述使用示例 概述 Boost.Interprocess提供了一些基本的类来创建共享内存对象和文件映射&#xff0c;并将这些可映射的类映射到进程的地址空间中。 然而&#xff0c;管理这些内存段对于非平凡的任务来说并不容易。一个映射区域是一个固定长度的内存缓冲区&#xff0…
阅读更多...
免注册，ChatGPT可即时访问了！

免注册，ChatGPT可即时访问了！

AI又有啥进展&#xff1f;一起看看吧 Apple进军个人家用机器人 Apple在放弃自动驾驶汽车项目并推出混合现实头显后&#xff0c;正在进军个人机器人领域&#xff0c;处于开发家用环境机器人的早期阶段 报告中提到了两种可能的机器人设计。一种是移动机器人&#xff0c;可以跟…
阅读更多...
鸿蒙OS元服务开发：【（Stage模型）学习窗口沉浸式能力】

鸿蒙OS元服务开发：【（Stage模型）学习窗口沉浸式能力】

一、体验窗口沉浸式能力说明 在看视频、玩游戏等场景下&#xff0c;用户往往希望隐藏状态栏、导航栏等不必要的系统窗口&#xff0c;从而获得更佳的沉浸式体验。此时可以借助窗口沉浸式能力&#xff08;窗口沉浸式能力都是针对应用主窗口而言的&#xff09;&#xff0c;达到预…
阅读更多...
二叉堆解读

二叉堆解读

在数据结构和算法中&#xff0c;二叉堆是一种非常重要的数据结构&#xff0c;它被广泛用于实现优先队列、堆排序等场景。本文将介绍二叉堆的基本概念、性质、操作以及应用场景。 一、基本概念 二叉堆是一种特殊的完全二叉树&#xff0c;它满足堆性质&#xff1a;对于每个节点…
阅读更多...
练习题（2024/4/3）

练习题（2024/4/3）

1题目描述&#xff1a; 给定两个大小分别为 m 和 n 的正序&#xff08;从小到大&#xff09;数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O(log (mn)) 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,3], nums2 [2] 输出&…
阅读更多...
Redis Hash结构操作

Redis Hash结构操作

基础篇Redis 6.4 Hash结构操作 在基础篇的最后&#xff0c;咱们对Hash结构操作一下&#xff0c;收一个小尾巴&#xff0c;这个代码咱们就不再解释啦 马上就开始新的篇章~~~进入到我们的Redis实战篇 SpringBootTest class RedisStringTests {Autowiredprivate StringRedisTe…
阅读更多...
电子商务平台中大数据的应用|主流电商平台大数据采集API接口

电子商务平台中大数据的应用|主流电商平台大数据采集API接口

(一)电商平台物流管理中大数据的应用 电商平台订单详情订单列表物流信息API接口应用 电子商务企业对射频识别设备、条形码扫描设备、全球定位系统及销售网站、交通、库存等管理软件数据进行实时或近实时的分析研究,提高物流速度和准确性。部分电商平台已建立高效的物流配送网…
阅读更多...
什么是Java中的分布式系统？举例说明

什么是Java中的分布式系统？举例说明

在Java中&#xff0c;分布式系统是由一组通过网络进行通信、为了完成共同的任务而协调工作的计算机节点组成的系统。这种系统架构的目的是利用更多的机器处理更多的数据&#xff0c;从而解决单个计算机无法应对的计算、存储任务。 当单个节点的处理能力无法满足日益增长的计算…
阅读更多...
【STL】vector的底层原理及其实现

【STL】vector的底层原理及其实现

vector的介绍 vector是一个可变的数组序列容器。 1.vector的底层实际上就是一个数组。因此vector也可以采用连续存储空间来存储元素。也可以直接用下标访问vector的元素。我们完全可以把它就当成一个自定义类型的数组使用。 2.除了可以直接用下标访问元素&#xff0c;vector还…
阅读更多...
掌握数据相关性新利器：基于R、Python的Copula变量相关性分析及AI大模型应用探索

掌握数据相关性新利器：基于R、Python的Copula变量相关性分析及AI大模型应用探索

在工程、水文和金融等各学科的研究中&#xff0c;总是会遇到很多变量&#xff0c;研究这些相互纠缠的变量间的相关关系是各学科的研究的重点。虽然皮尔逊相关、秩相关等相关系数提供了变量间相关关系的粗略结果&#xff0c;但这些系数都存在着无法克服的困难。例如&#xff0c;…
阅读更多...
使用预训练的bert large model实现问答系统源码（本地实现 question answer system）

使用预训练的bert large model实现问答系统源码（本地实现 question answer system）

pre-trained bert model 预训练好的Bert模型 本地实现问答系统 用这条命令将bert下载到本地&#xff1a; model.save_pretrained("path/to/model") 具体代码 如下链接&#xff1a; https://download.csdn.net/download/qqqweiweiqq/89092005
阅读更多...
解决win7作为虚拟机无法复制粘贴共享文件的问题

解决win7作为虚拟机无法复制粘贴共享文件的问题

win7作为虚拟机经常会出现无法与主机的剪切板共享、文件共享。 归根结底是win7虚拟机里面没有安装VMware Tools 能够成功安装vmware tools的条件&#xff1a; 1&#xff09;win7版本为win7 sp1及以上 2&#xff09;安装KB4490628&#xff0c;KB4474419补丁 因此下面来详细介绍…
阅读更多...
最新文章

Copyright @ 2022~2023