前端知识点（面试可看）—— CSS篇

摘要

马上就要毕业啦，没有参加2023年的秋招，准备在最近开始找全职或者实习工作，然后也马上过年了，总结和理一下自己的知识要点，参加2024年的春招。

1. link和@import区别

  • link是XHTML标签，除了加载CSS之外，还可以定义RSS等其他业务；@import属于CSS范畴，只能用于加载CSS
  • link加载CSS，在页面载入时加载；@import需要页面完全载入完后加载
  • link时XHTML标签，无兼容问题；@import时CSS2.1提出的
  • link支持JS使用DOM去改变样式；而@import不支持

2. display:none和visibility：hidden的区别

  • 前者会让元素完全从渲染树中消失
  • 后者不会消失，且会占据原来的空间，只是内容不可见

3. 伪元素和伪类的区别和作用

  • 伪元素： 在内容元素的前后插入额外的元素或者样式，但是这些元素不在文档中生成，只在外部中可以找到。
  • 伪类： 将特殊的效果添加到特定选择器上，他是已有元素上添加类别的，不会产生新的元素。

4. RequestAnimationframe

实现动画的方法：

  • JS：通过setTimeout实现
  • CSS3：transition和animation
  • HTML5：canvas

此外HTML专门用于请求动画的API，就是window.requestAnimationFrame0(callback)。主要是告诉浏览器，下次重绘之前调用指定的回调函数更新函数，参数为一个回调函数，会在下次进入浏览器时执行。该方法属于宏方法，会在微任务执行完后去执行。

如何取消： RequestAnimationframe会返回一个id，可以调用`window.cancelAnimationFrame(id)``来取消动画。

优势：

  1. CPU节能
  2. 函数节流
  3. 减少DOM操作

5. CSS3新特性

  • 新增各种CSS选择器(:not(.input): 所有不是input的元素)
  • 圆角
  • 多列布局
  • 阴影和反射
  • 文字特效
  • 文字渲染
  • 线性渐变
  • 动画：旋转、缩放、定位、倾斜、多背景等

6. CSS Sprites（精灵图）

其实就是一张大图片，将页面中要用的所有图片包含进去，然后使用CSS中的background-image、background-repeat、background-position都没后文哦

优点：

  1. 可以减少http的请求，提高性能
  2. 可以减少图片字节，将三张合成一张

缺点：

  1. 图片合并时需要有序，有间隔的，以免出现不必要的背景。
  2. 维护成本高

7. CSS优化和提高性能的方法

  1. css压缩
  2. css单一模式
  3. 减少使用@import

8. CSS预处理器/后处理器

预处理器： less、sass、stylus

后处理器： postcss，通常是在完成的样式表根据css规范处理css，让其更有效。目前最有效地就是给css属性添加前缀，实现跨浏览器兼容性问题。

优势：

  1. 结构清晰，便于扩展
  2. 可以很方便的屏蔽浏览器私有语法的差异
  3. 可以轻松实现多重继承
  4. 完美兼容CSS代码

9. ::before和:after为什么一个双冒号一个单冒号

冒号属于伪类，双冒号属于为元素

文本溢出

.single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}.more{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
}

10. 媒体查询

语法格式：

@media(max-width:1280px){.test{background:yellow;}
}

其实简单来说，就是可以针对不同设备的页面宽度来使用对应的css样式，从而达到响应式的目的。

11. CSS工程化

为了解决什么：

  1. 宏观设计
  2. 编码优化
  3. 构建
  4. 可维护性

怎么做最好：

  1. 使用预处理器
  2. 使用PostCss
  3. 使用Webpack loader

12. BFC

什么是BFC？

  • B就是box是CSS布局对象和基本单位，一个页面是由多个盒子模型（box）组成的
  • FC就是formatting context，表示上下文格式化，他是页面的一块渲染区域并且有一条渲染规则，是布局过程中生成块级盒子的区域。

通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创建条件：

  • 根元素：body
  • 浮动设置：float 除了none以外的值
  • 绝对定位：absolute和fixed
  • display为：inline-block、table-cell、table-caption、flex等
  • overflow为：hidden、auto、scroll

特点：

  1. 垂直方向上、由上而下，和文档流一样
  2. 上下相邻的margin会重叠
  3. 计算高度时，需要计算浮动元素的高度
  4. 不会与浮动的容器发生重叠
  5. 是独立的元素，不会影响外部元素
  6. 每个元素的左margin值和左border相接触

作用：

  1. 解决margin重叠问题，如果是两个BFC那他们相互是独立的，彼此不影响。
  2. 解决高度塌陷问题
  3. 创建自适应两栏布局

13. 场景应用

13.1 实现一个三角形

.triangle{border:100px solid transparent;border-top-color:red;
}

13.2 实现一个扇形

.sector{border:100px solid transparent;border-top-color:red;border-radius:100px;
}

13.3 自适应正方形

.square{
width: 20%;height: 0;padding-top: 20%;background: orange;
}

14. 字体问题

14.1 设置小于12px字体

  1. 使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决。-webkit-text-size-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。
  2. 使用transform的scale属性
  3. 使用图片

14.2 1px问题

1px问题主要是在Retina屏幕的机器中会显示的很粗，因为他和移动设备中的1px不一样，需要去专门设置一个属性，就是window.devicePixelRatio = 物理像素 / CSS像素

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

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

相关文章

process.cwd() 与 __dirname 的区别

process.cwd() 与 __dirname 的区别

Node.js 中的 __dirname 和 process.cwd() 都是用于获取文件系统路径的全局变量和方法，但它们有不同的含义和用途。 一、process.cwd() process.cwd() 是一个方法，用于获取 Node.js 进程的当前工作目录。它返回的是 Node.js 进程启动时所在的工作目录的…
阅读更多...
Java安装详细教程

Java安装详细教程

文章目录 一、JDK 下载 和 安装1.1 选择 Java版本1.2 下载 JDK 二、 配置环境变量2.1 配置环境变量的原因2.2 配置环境变量2.3 验证配置是否成功 参考资料 一、JDK 下载 和 安装 1.1 选择 Java版本 访问 Oracle 官方网站的 Java 下载页面Java Archive | Oracle。 在 “Java …
阅读更多...
用PHP搭建一个绘画API

用PHP搭建一个绘画API

【腾讯云AI绘画】用PHP搭建一个绘画API 大家好！今天我要给大家推荐的是如何用PHP搭建一个绘画API，让你的网站或应用瞬间拥有强大的绘画能力！无论你是想要让用户在网页上绘制自己的创意，还是想要实现自动绘画生成特效，这…
阅读更多...
可以写作文的AI写作，看看这五款

可以写作文的AI写作，看看这五款

随着人工智能技术的不断发展，AI写作软件逐渐走进了我们的生活，这些软件可以帮助我们快速生成高质量的作文，节省了大量的时间和精力。在市场上有许多种类的AI写作软件，下面我将介绍五款比较受欢迎的。 首先，我们来看看“…
阅读更多...
进程的基础认识

进程的基础认识

一、进程的概念 进程是指 可执行程序 内核数据结构（内核为了管理进程而创建的数据结构）。 二、进程的管理 进程是靠PCB(process control block [进程控制块])管理起来的，在linux下PCB叫 task_struct 当一个可执行程序从磁盘加载进内存&…
阅读更多...
HTTP 错误 401.3 - Unauthorized 由于Web服务器上此资源的访问控制列表(ACL)配置或加密设置。

HTTP 错误 401.3 - Unauthorized 由于Web服务器上此资源的访问控制列表(ACL)配置或加密设置。

用IIS 发布网站，不能访问且出现错误： HTTP 错误 401.3 - Unauthorized 由于Web服务器上此资源的访问控制列表(ACL)配置或加密设置。您无权查看此目录或页面 解决办法： 1.打开IIS界面，选中发布的网站，右键—>编辑…
阅读更多...
【Java 基础】-- 实例化

【Java 基础】-- 实例化

1、定义 创建对象的过程就叫实例化。这个过程中会在堆中开辟内存，将一些非静态的方法，变量存放在里面。在程序执行的过程中，可以创建多个对象，既多次实例化。每次实例化都会开辟一块新的内存。 2、实例化的几种方法 new 关键字创…
阅读更多...
Yolov8部署——segmentation部署以及批量推理

Yolov8部署——segmentation部署以及批量推理

Yolov8部署——segmentation部署以及批量推理 参考:在windows上部署Yolov8主要参考下面两个仓库，https://github.com/xunzixunzi/tensorrt-cpp-api和https://github.com/xunzixunzi/YOLOv8-TensorRT-CPP，代码说是适合批量处理，但是代码中是以…
阅读更多...
bootstrap5实现的在线商城网站Parlo

bootstrap5实现的在线商城网站Parlo

一、需求分析 在线商城网站是指基于互联网技术搭建的电子商务平台，通过网站提供商品和服务的展示、销售和交易功能。它的主要作用包括以下几个方面： 商品展示和销售：在线商城网站是商家展示商品的平台，可以通过图片、文字、视频等…
阅读更多...
水经微图IOS版APP正式上线！

水经微图IOS版APP正式上线！

水经微图APP（简称“微图APP”）IOS版已正式上线！ 微图IOS版APP下载安装 节后上班第一天，同事说微图APP通过了苹果应用商店审核，已经上线了。 于是迫不及待地打开 App Store 搜索“水经微图”，但并没有搜索…
阅读更多...
uniapp中组件库的Radio 单选框丰富的使用方法

uniapp中组件库的Radio 单选框丰富的使用方法

目录 #平台差异说明 #基本使用 #自定义形状 #禁用radio #是否禁止点击提示语选中复选框 #自定义颜色 #横向排列形式 #横向两端排列形式 API #Radio Props #radioGroup Props #radio Event #radioGroup Event 单选框用于有一个选择，用户只能选择其中一个…
阅读更多...
复试 || 就业day06(2024.01.01)算法篇

复试 || 就业day06(2024.01.01)算法篇

文章目录 前言分糖果最长和谐子序列两个列表的最小索引总和错误的集合两数之和 IV - 输入二叉搜索树 前言 💫你好，我是辰chen，本文旨在准备考研复试或就业 💫文章题目大多来自于 leetcode，当然也可能来自洛谷或其他刷题…
阅读更多...
C++ DAY6 作业

C++ DAY6 作业

1.用模板类写顺序表 #include <iostream>using namespace std;#define MAXSIZE 10 template <typename T> class Arr {T *data NULL;int len 0; public://构造函数Arr():data(new T){}Arr(T a,int len):data(new T(a)),len(len){}//析构函数~Arr(){delete data;}…
阅读更多...
【elfboard linux开发板】4. 文件点灯与创建多进程

【elfboard linux开发板】4. 文件点灯与创建多进程

ps&#xff1a;提升效率的小tips&#xff1a; 灵活运用vim操作命令&#xff0c;gg快速跳转到文件开头&#xff0c;G跳转到结尾 多行操作 ctrl V shift i 插入修改内容 esc退出编辑 sudo vi /etc/vim/vimrc 在文件中添加如下内容省略重复工作&#xff1a; autocmd BufNewFile …
阅读更多...
霹雳吧啦Wz《pytorch图像分类》-p3VGG网络

霹雳吧啦Wz《pytorch图像分类》-p3VGG网络

《pytorch图像分类》p3VGG网络详解及感受野的计算 一、零碎知识点1.nn.Sequential2.**kwargs 二、VGG网络模型详解1.感受野2.模型手算 三、代码1.module.py2.train.py3.predict.py 一、零碎知识点 论文连接&#xff1a;VERY DEEP CONVOLUTIONAL NETWORKS FOR LARGE-SCALE IMAG…
阅读更多...
结算时间和可组合性助力Sui上DeFi蓬勃发展

结算时间和可组合性助力Sui上DeFi蓬勃发展

结算时间是基于Sui交易处理模型的度量标准&#xff0c;确保DeFi用户几乎立即看到交易结果。可组合性则是深深融入Sui的编程环境&#xff0c;扩展了其对对象和智能合约的影响。Sui深度的可组合性赋予DeFi构建者引入创新产品的能力&#xff0c;使其在其他区块链上的DeFi应用中独树…
阅读更多...
基于Java校园招待所管理系统

基于Java校园招待所管理系统

基于Java校园招待所管理系统 功能需求 1、客房管理&#xff1a;系统需要管理招待所的客房信息&#xff0c;包括房间类型、数量、价格、状态等&#xff0c;并能够实时更新客房状态。 2、客人管理&#xff1a;系统需要记录客人的基本信息&#xff0c;包括姓名、性别、年龄、联…
阅读更多...
Crypto的简单应用-前后端加密传输

Crypto的简单应用-前后端加密传输

最近遇到一个数据脱敏处理的需求&#xff0c;想要用一种轻量级的技术实现&#xff0c;必须足够简单并且适用于所有场合如前后端加密传输、路由加密、数据脱敏等。抽时间研究了一下Crypto加密库的一些API&#xff0c;发现完全符合上述需求&#xff0c;扩展也比较容易。 1、前端加…
阅读更多...
[C#]使用onnxruntime部署Detic检测2万1千种类别的物体

[C#]使用onnxruntime部署Detic检测2万1千种类别的物体

【源码地址】 github地址&#xff1a;https://github.com/facebookresearch/Detic/tree/main 【算法介绍】 Detic论文&#xff1a;https://arxiv.org/abs/2201.02605v3 项目源码&#xff1a;https://github.com/facebookresearch/Detic 在Detic论文中&#xff0c;Detic提到…
阅读更多...
2023.12.27 关于 Redis 数据类型 List 常用命令

2023.12.27 关于 Redis 数据类型 List 常用命令

目录 List 类型基本概念 List 类型特点 List 操作命令 LPUSH LPUSHX RPUSH RPUSHX LRANGE LPOP RPOP LINDEX LINSERT LREM LTRIM LSET 阻塞版本的命令 阻塞版本 和 非阻塞版本的区别 BLPOP & BRPOP List 类型基本概念 Redis 中的列表&#xff08;list&am…
阅读更多...
最新文章

Copyright @ 2022~2023