css八股

伪类，伪元素

伪类：

1.指某种特定的行为或者状态，例如鼠标悬停，点击，第一个子元素等

2.以：开头，：hover，：focus

3.伪类不会形成新的元素，只会改变原有的样式

伪元素：

1.伪元素一般用于选择器中创建新的元素，并且对他进行样式化，例如：创建新的内容，改变定位，改变样式等

2.以::双冒号开头，::before选中元素的前面添加内容，::after选中元素的后面加上内容，::first-line只能用于块级元素的第一行文本

3.伪元素在文档中生成了一个虚拟的元素，可以通过样式化该元素来实现一些特定的效果。

css的content属性有什么作用？有什么应用？

content属性用于在内容中插入一些额外的文本，图像等装饰性内容，只能用于伪元素中，不会影响真实的dom结果

#myList li::before {content: "\2022"; /* 使用Unicode编码创建圆点 */margin-right: 8px; /* 设置圆点与文本之间的间距 */
}
rem
  • rem（root em）是相对于根元素（通常是<html>元素）的字体大小进行计算的单位。
  • em是相对于其父元素的字体大小进行计算的单位。

如果一个元素的字体大小使用了em单位，并且其父元素也使用了em单位来设置字体大小，那么子元素的字体大小将会是相对于其父元素的父元素的字体大小计算的。这种嵌套的关系会导致字体大小的计算变得复杂。

盒子模型

盒子模型：content，margin，padding，border属性

怪异盒子（旧版ie）模型：content包括了padding和border属性

避免出现盒子模型的兼容性问题，可以通过在文档中添加<!DOCTYPE html>来强制浏览器使用标准的盒子模型。

重绘和回流 ( 重排) 是什么， 如何避免？

重绘指元素的样式变化，如：颜色，背景，边框等，浏览器重新绘制整个元素，不会影响元素的布局

回流指元素的布局发生变化，如：大小，间距，位置等，浏览器会重新计算元素之间的位置，导致页面重新渲染，消耗比较大

避免频繁的重绘和回流，可以采取以下几个措施：

  1. 使用 CSS3 动画来代替 JavaScript 动画：CSS3 动画利用了硬件加速，性能较好，可以减少重绘和回流的次数。
  2. 使用 transform 属性来进行动画：transform 属性不会引起回流，可以避免布局计算和页面渲染。
  3. 避免频繁使用 table 布局：table 布局在每次元素变化时都会引起回流。
  4. 避免频繁修改元素的样式：尽量将样式的修改集中在一次操作中，减少回流的次数。
  5. 使用文档片段（DocumentFragment）进行 DOM 操作：将需要频繁操作的元素使用文档片段包裹起来，进行操作后再统一插入文档，减少回流次数。
  6. 使用虚拟 DOM（virtual DOM）：虚拟 DOM 可以将多次修改合并成一次操作，最小化重绘和回流的次数。
css的硬件加速

CSS 的硬件加速是指利用 GPU（图形处理器）来加速浏览器的渲染过程，提高页面的流畅度，

GPU具有并行计算的能力，对于大量的顶点坐标变换和矩阵运算等工作非常高效。所以，当对象需要进行位置变换时，通常会在GPU上使用着色器（Shader）程序来进行变换计算。一般情况下，可以在着色器中定义变换矩阵，并使用顶点着色器将对象的顶点坐标进行变换计算，然后在后续的渲染过程中将变换后的顶点坐标传递给片元着色器进行颜色插值等处理。

总的来说，GPU在进行位置变换计算时是非常高效且适合的，能够提供流畅的图形变换和渲染效果。因此，对于图形应用程序中的对象位置变换等操作，通常会利用GPU的并行计算能力来进行计算，以提高性能和效率。

有几种方法可以触发硬件加速：

1.transform属性，实现元素的变换效果，可以对元素进行旋转、缩放、平移和倾斜等操作

2.opacity属性，设置透明度

css的阻塞怎么解决

1.将css文件放在头部，确保浏览器解析时可以尽快获取并加载css文件，避免页面的阻塞

2.使用link加载css的方法，可以将link标签引入css文件，并放在head头部中，这样可以减少对html的阻塞，因为CSS文件的下载和解析可以与HTML文档的解析过程同时进行，不会阻塞HTML的渲染。(总的来说，link引入css文件，可以边下载边解析，但是@import引入时，必须等待下载完成才会解析，所以会导致阻塞)

3.使用媒体查询加载，根据link标签内的media属性来设置特定的范围，当条件满足的时候才加载文件，这样可以延迟css文件加载的时间，避免阻塞

4.使用css预处理器来优化css文件，将css代码进行压缩合并操作等优化操作

5.使用浏览器缓存，首次加载的时候，对css的样式进行缓存，下次就可以直接从缓存中获取，无需重新的下载

link和@import

link:html方式

1.link 标签可以在页面加载时同时下载和渲染外部样式表，并且支持并行下载多个文件

2.使用<link>标签引入的外部样式表文件可以被浏览器缓存，从而优化页面的加载速度。

@import：是css方式

1.而@import语句会阻止页面的并行加载，每个@import语句会按照顺序依次加载外部样式表，并且要等到页面加载完毕了才会加载，每个样式表加载完成后才会加载下一个

2.@import语句引入的样式表没有这个缓存效果，每次都需要重新加载和解析。

行内元素 块级元素复习

行内元素（Inline Element）：

    • 行内元素通常只占据它所在的内容的宽度，不会独占一行。
    • 行内元素可以和其他行内元素在同一行显示，如果空间不够，则会被强制换行显示。
    • 行内元素不可以设置宽度、高度、上下外边距和下边距，但可以设置左右外边距和内边距。
    • 常见的行内元素有<span>、<a>、<img>、<em>等。

块级元素（Block Element）：

    • 块级元素会独占一行，即使它的宽度没有占满父级容器的宽度。
    • 块级元素可以设置宽度、高度、上下外边距和下边距，以及内边距。
    • 块级元素会在默认情况下填充父级容器的宽度。
    • 常见的块级元素有<div>、<p>、<h1>到<h6>、<ul>、<li>等。

inline-block 是一种元素显示类型，它同时具备行内元素和块级元素的特性。

与行内元素相同的是，inline-block 元素可以和其他行内元素在同一行显示，并且不会独占一行。

与块级元素相同的是，inline-block 元素可以设置宽度、高度、内边距和外边距，并且默认情况下会填充父级容器的宽度。

display
  1. block：将元素显示为块级元素，独占一行。它会在前后创建额外的空白，并且可以设置宽度、高度以及其他盒子模型属性。常见的块级元素有 <div>、<p>、<h1> 等。
  2. inline：将元素显示为内联元素，不会独占一行。它会尽可能地与其他内联元素在一行显示，并且无法设置宽度、高度等盒子模型属性。常见的内联元素有 <span>、<a>、<strong> 等。
  3. inline-block：将元素显示为内联块级元素，与内联元素类似，但可以设置宽度、高度等盒子模型属性。它会尽可能地与其他内联元素在一行显示，并且可以设置宽度、高度等盒子模型属性。常见的内联块级元素有 <img>、<input> 等。
  4. none：将元素完全隐藏，不占据空间。元素及其内容都不会被渲染和显示。
  5. flex：将元素显示为弹性盒子（Flexbox）容器。它可以使用弹性盒子布局来调整其子元素的排列方式和尺寸。通过设置子元素的 flex 属性，可以实现灵活的布局效果。
  6. grid：将元素显示为网格容器（Grid）容器。它可以使用网格布局来定义复杂的二维布局。通过设置子元素的 grid 属性，可以控制子元素在网格中的位置和尺寸。
position
  1. static：默认值，元素按照正常的文档流进行定位，不受 top、right、bottom 和 left 属性的影响。它不会被其他元素覆盖或覆盖其他元素。
  2. relative：元素相对于其正常位置进行定位，可以通过设置 top、right、bottom 和 left 属性来调整其位置。相对定位不会使元素脱离文档流，其他元素仍然会根据其原始位置进行布局。如果没有设置偏移属性，则元素仍然在正常位置。
  3. absolute：元素相对于其最近的已定位祖先元素进行定位，如果不存在已定位的祖先元素，则相对于初始包含块（通常是文档的根元素）进行定位。通过设置 top、right、bottom 和 left 属性，可以将元素定位到所需的位置。绝对定位会使元素脱离文档流，其他元素不会考虑其位置而进行布局。
  4. fixed：元素相对于视口进行定位，始终保持在相同的位置，即使页面滚动。通过设置 top、right、bottom 和 left 属性，可以调整元素在视口中的位置。固定定位也会使元素脱离文档流，其他元素不会考虑其位置而进行布局。
  5. sticky：元素根据正常文档流进行定位，直到滚动到指定阈值时变为固定定位。通过设置 top、right、bottom 和 left 属性，可以调整元素在阈值之后的位置。粘性定位的行为类似于相对定位和固定定位的组合，它会在特定条件下切换定位方式。
不同设备前端适配，移动端如何兼容比如小程序，

1.进行响应式设计，例如媒体查询：通过屏幕分辨率，尺寸等相关数据，动态的使用相关的css样式来进行适配，媒体查询使得网页能够根据设备特性和特定条件，灵活地调整样式，从而提升用户体验。

2.利用flex弹性布局或者百分比布局

3.使用em代替px

4.使用移动端的适配框架

5.针对不同设备进行兼容性测试

BFC

触发 BFC，可以使得父元素包裹的子元素按照父元素的边界进行定位和布局，而不受到外部元素的影响。这样可以实现准确的相对变化，并且不会影响到其他元素的布局和定位。

例如：父元素没有高度，子元素浮动会导致父元素塌陷

子元素外边距会使父元素的塌陷的问题

父元素只要添加其中一个内容，就可以实现BFC

    1. overflow: hidden;
    2. display: flex;
    3. display: inline-flex;
    4. display: inline-block;
    5. position: absolute;
    6. position: fixed;

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

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

相关文章

柱层析SOP

柱层析SOP

1.TLC检测 尝试极性PE:EA的比值由5&#xff1a;1 到1&#xff1a;1&#xff0c;如若色谱上点未发生变化&#xff0c;再继续尝试极性DCM:MeOH由5&#xff1a;1 到 1&#xff1a;1。 但需保证各点的Rf分布在0.1到0.9之间。 PE:石油醚 EA&#xff1a;乙酸乙酯 DCM&am…
阅读更多...
【论文阅读】YOLO-World | 开集目标检测

【论文阅读】YOLO-World | 开集目标检测

Date&#xff1a;2024.02.22&#xff0c;Tencent AI Lab&#xff0c;华中科技大学Paper&#xff1a;https://arxiv.org/pdf/2401.17270.pdfGithub&#xff1a;https://github.com/AILab-CVC/YOLO-World 论文解决的问题&#xff1a; 通过视觉语言建模和大规模数据集上的预训练来…
阅读更多...
ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改

ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a…
阅读更多...
Python数据可视化：散点图matplotlib.pyplot.scatter()

Python数据可视化：散点图matplotlib.pyplot.scatter()

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 Python数据可视化&#xff1a; 散点图 matplotlib.pyplot.scatter() 请问关于以下代码表述错误的选项是&#xff1f; import matplotlib.pyplot as plt x [1, 2, 3, 4, 5] y [2, 3, 5, 7,…
阅读更多...
热塑性聚氨酯TPU的特性有哪些？UV胶水能够粘接热塑性聚氨酯TPU吗？又有哪些优势呢？

热塑性聚氨酯TPU的特性有哪些？UV胶水能够粘接热塑性聚氨酯TPU吗？又有哪些优势呢？

热塑性聚氨酯&#xff08;Thermoplastic Polyurethane&#xff0c;TPU&#xff09;是一种具有多种优异性能的弹性塑料&#xff0c;广泛用于各种应用领域。以下是TPU的一些主要特性&#xff1a; 弹性和柔软性&#xff1a; TPU具有良好的弹性和柔软性&#xff0c;能够在受力后迅速…
阅读更多...
JVM复习总结2024.4.18（很重要）

JVM复习总结2024.4.18（很重要）

一、 1. 基于JDK1.8的String intern()方法解析 intern方法 1.8&#xff1a; 调用字符串对象的intern方法&#xff0c;会将该字符串对象尝试放入到串池中 如果串池中没有该字符串对象&#xff0c;则放入成功如果有该字符串对象&#xff0c;则放入失败 无论放入是否成功&#xff…
阅读更多...
数据库-Redis（18）

数据库-Redis（18）

目录 86.Redis 分布式锁的实现？什么是RedLock? 87.Redis缓存有哪些问题，如何解决？ 88.Redis性能问题有哪些，如何分析定位解决？
阅读更多...
短视频批量采集提取软件|视频下载工具

短视频批量采集提取软件|视频下载工具

短视频批量采集提取软件&#xff1a;高效获取视频资源 一、开发背景 在日常业务中&#xff0c;我们经常需要获取大量的短视频资源&#xff0c;以支持各种需求&#xff0c;但传统的获取方式过于繁琐&#xff0c;一一复制链接下载效率低下。基于此需求&#xff0c;我们开发了一…
阅读更多...
Jenkins机器已经安装了ansible, 运行的时候却报错ansible: command not found

Jenkins机器已经安装了ansible, 运行的时候却报错ansible: command not found

操作系统&#xff1a;MacOS Jenkins log提示 ansible: command not found 直接在Jenkins 机器中&#xff0c;进入一样的目录执行ansible --version OK 原因&#xff1a; Jenkins 默认使用的环境是 /usr/bin, 而我的ansible 安装配置在conda3 下面&#xff0c;所以需要在Jenkin…
阅读更多...
【工位ubuntu的配置】补充

【工位ubuntu的配置】补充

软件 安装桌面图标的问题 登录密码 root的密码为&#xff1a;19980719 按照如下的链接进行配置&#xff1a; https://blog.csdn.net/zhangmingfie/article/details/131102331?spm1001.2101.3001.6650.3&utm_mediumdistribute.pc_relevant.none-task-blog-2%7Edefault%7E…
阅读更多...
Meta发布新AI模型Llama 3，包含80亿和700亿参数

Meta发布新AI模型Llama 3，包含80亿和700亿参数

据Odaily星球日报报道&#xff0c;Meta旗下AIatMeta官方在X平台发文&#xff0c;Meta正式发布了包括80亿参数和700亿参数在内的2个新AI模型Llama 3。这些模型实现了新功能&#xff0c;如改进的推理能力&#xff0c;并为特定模型设定了新的最先进水平。在未来几个月&#xff0c;…
阅读更多...
opencv图像转QPixmap格式图像后无彩色且中间有一条黑线

opencv图像转QPixmap格式图像后无彩色且中间有一条黑线

背景 自己使用PyQt5开发了一个界面&#xff0c;需要在界面的某个标签上显示opencv-python处理后的图像&#xff0c; 原来使用的代码段如下&#xff1a; img_rgb cv2.cvtColor(cvimage, cv2.COLOR_BGR2RGB)cv2.imwrite(2.jpg,img_rgb)qimg QImage(img_rgb.data, img_rgb.shape…
阅读更多...
工业控制（ICS）---modbus

工业控制（ICS）---modbus

Modbus Modbus&#xff0c;市场占有率高、出题频率高,算是最常见的题目&#xff0c;因为这个协议也是工控领域最常见的协议之一&#xff0c;主要有三类 Modbus/RTU 从机地址1B功能码1B数据字段xBCRC值2B 最大长度256B&#xff0c;所以数据字段最大长度252B Modbus/ASCII …
阅读更多...
DFS之剪枝2

DFS之剪枝2

给定两个整数 n , x n,x n,x。 你可以对 x x x 进行任意次以下操作&#xff1a; 选择 x x x 的一位数字 y y y&#xff0c;将 x x x 替换为 x y x \times y xy。 请你计算通过使用上述操作&#xff0c;将 x x x 变为一个 n n n 位数字&#xff08;不含前导 0 0 0&…
阅读更多...
C++笔记：引用

C++笔记：引用

目录 概念&#xff1a; ​编辑 引用的特性&#xff1a; 引用中的权限问题&#xff1a; 引用与指针的区别&#xff1a; 引用的使用&#xff1a; 概念&#xff1a; 引用是给已存在变量取一个别名&#xff0c;编译器不会为引用变量开辟内存空间。 引用的符号&#xff1a;&…
阅读更多...
NLP(3)--利用nn反向计算参数

NLP(3)--利用nn反向计算参数

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 获取数据 自定义一个方程&#xff0c;获取一批数据X,Y import matplotlib.pyplot as pyplot import math import sysX [0.01 * x for x in range(100)] Y [2*x**2 3*x 4 for x in X] print(X) print(Y) pyplot.scatter(…
阅读更多...
KV Cache 技术分析

KV Cache 技术分析

原文&#xff1a;Notion – The all-in-one workspace for your notes, tasks, wikis, and databases. 1 什么是KV Cache LLM&#xff08;大型语言模型&#xff09;中的 Attention 机制中的 KV Cache&#xff08;键值缓存&#xff09;主要作用是存储键值对&#xff0c;以避免在…
阅读更多...
ChatGPT又多了一个强有力的竞争对手：Meta发布Llama 3开源模型！附体验地址

ChatGPT又多了一个强有力的竞争对手：Meta发布Llama 3开源模型！附体验地址

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…
阅读更多...
ChatPDF代码解读2

ChatPDF代码解读2

这段代码定义了一个名为`ChatPDF`的类，它结合了文本相似性模型和生成模型，用于处理和生成基于特定文档语料库的自然语言回答。以下是对代码的详细解读： 1. **导入依赖**：代码开始处导入了多个Python库，包括`argparse`（命令行参数解析）、`hashlib`（哈希函数）、`os`（操…
阅读更多...
力扣：两数之和

力扣：两数之和

知识点&#xff1a; 动态数组的创建&#xff1a; #include<stdlib.h> arr (int*)malloc(len * sizeof(int)); 如何使用sacnf输入数组&#xff1a; scanf 函数在读取输入时&#xff0c;会自动跳过空格&#xff08;空格、制表符、换行符等&#xff09;和换行符&#…
阅读更多...
最新文章

Copyright @ 2022~2023