css 知识点整理
1.css 层叠样式表 中的 inherit、initial、unset
关键字 | 适用属性类型 | 行为逻辑 | 典型场景 |
---|---|---|---|
inherit | 所有属性 | 强制继承父级值 | 统一子元素样式 |
initial | 所有属性 | 重置为规范初始值 | 清除自定义或继承样式 |
unset | 所有属性 | 自动判断继承或重置 | 简化全局样式重置或覆盖 |
2. sass 常用语法
2.1、变量(Variables)
$primary-color: #3498db;
$font-size: 16px;// 使用变量
.header {color: $primary-color;font-size: $font-size;
}
2.2 嵌套(Nesting)
.nav {padding: 1rem;// 子元素嵌套ul {margin: 0;// 父选择器 & li {display: inline-block;&:hover {color: red;}}}
}
// 编译结果
.nav { padding: 1rem; }
.nav ul { margin: 0; }
.nav ul li { display: inline-block; }
.nav ul li:hover { color: red; }
2.3 混合指令(Mixins)
// 定义 Mixin
@mixin flex-center($direction: row) {display: flex;justify-content: center;align-items: center;flex-direction: $direction;
}// 调用 Mixin
.container {@include flex-center(column);
}
// 编译结果
.container {display: flex;justify-content: center;align-items: center;flex-direction: column;
}
2.4 继承(Extend)
// 基础样式
%button-base {padding: 12px 24px;border-radius: 4px;
}// 继承扩展
.primary-button {@extend %button-base;background-color: blue;
}
2.5 循环(Loops)
2.5.1 @each 遍历列表
$sizes: 40px, 60px, 80px;
@each $size in $sizes {.icon-#{$size} {width: $size;height: $size;}
}
2.5.2 @for 生成序列
@for $i from 1 through 3 {.mt-#{$i} { margin-top: 10px * $i; }
}
2.6 函数(Functions)
// 自定义函数
@function to-rem($px) {@return ($px / 16px) * 1rem;
}// 使用函数
.text {font-size: to-rem(24px); // 输出 1.5rem
}
2.7 模块化(@use 和 @forward)
2.7.1 定义模块 _variables.scss
// 私有变量(加 - 前缀)
$-base-padding: 10px;// 公开变量
$primary-color: #333 !default;// 2.7.2 引入模块 main.scss
@use 'variables' as vars;body {color: vars.$primary-color;padding: vars.$-base-padding; // 报错(无法访问私有变量)
}
2.8 条件语句(@if, @else)
@mixin theme($mode) {@if $mode == dark {background: #000;color: white;} @else {background: white;color: #000;}
}
2.9 插值语法(#{})
$property: "margin";
$direction: "top";.#{$property}-#{$direction} {#{$property}-#{$direction}: 20px;
}
2.10 运算符
$width: 100%; .sidebar {width: $width / 3 - 20px; // 支持加减乘除padding: 10px + 5px; // 15px
}
3. 对BFC的理解,如何创建BFC
BFC (Block Formatting Context) 块级格式上下文,是 CSS 中的一种布局机制,一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。【用于解决高度塌缩、边距折叠等】
如何触发:
- 根元素 默认生成一个 BFC;
- float 值非 none;
- overflow值非 visible;
- position 值为absoute、fixed;
- display 值为 inline-block、table-cell、flex、grid、【新属性 flow-root】
4. li 与 li 之间有看不见的空白间隔是什么原因引起的?如何解决?
HTML 空白字符渲染浏览器会将
- 标签间的换行、缩进等空白字符渲染成一个空格,类似于文本排版中的自然间隔。inline-block 的布局特性 会保留块盒属性,同时像文本一样排列,因此空白字符会影响布局。
解决方法: -
- 消除
- 的字符间隔 letter-spacing:-8px,不足:这也设置了
- 内的字符间隔,因此需要将
- 内的字符间隔设为默认letter-spacing:normal。
- 使用 flex 或者 grid 布局
5. link 和 import 区别
区别点 link @import 从属关系 HTML 标签(属于 HTML 规范) CSS 语法(属于 CSS2.1 规范) 语法 < link href=“style.css” rel=“stylesheet”>(写在 HTML 中) @import url(“style.css”);(写在 CSS 文件或 < style> 标签内,且必须在顶部) 加载顺序 与 HTML 并行加载,不阻塞页面渲染 需等待 HTML 加载完成后再加载 CSS,可能导致 FOUC(短暂无样式) 兼容性 所有浏览器(包括 IE5+) IE5+ 及现代浏览器(IE4 及更低不支持) DOM 可控性 可通过 JS 动态插入、删除或修改(如切换主题) 无法通过 JS 动态操作,需直接修改 CSS 文件 权重与覆盖 优先级较高,后加载的样式覆盖先加载的 优先级较低,即使后加载也可能被 样式覆盖 媒体查询支持 支持 media 属性(如 media=“print”) 支持在 @import 后加媒体条件(如 @import url(“print.css”) print;) 模块化与代码复用 需手动在 HTML 中引入多个文件 可在 CSS 文件中嵌套引入其他文件(如 @import “base.css”;) 预加载优化 支持 rel=“preload” 提前加载关键 CSS 不支持预加载 适用场景 主样式表、动态样式加载、需高性能的场景 CSS 模块化拆分、第三方基础样式库引入 6. transition 和 animation 的区别?
特性 transition animation 触发方式 需用户交互或属性变化触发 可自动触发或手动控制 状态控制 仅初始态和结束态 支持多关键帧中间状态 循环能力 默认单次运行 支持无限循环 控制复杂度 简单(时长、延迟、缓动) 复杂(方向、填充模式、迭代次数) 适用场景 简单属性过渡(颜色、尺寸) 复杂动画(序列、循环) 7.为什么有时候人们用translate来改变位置而不是定位如absolute或relative?
性能更优,GPU 加速,避免重排 。
- translate :通过 transform:translate() 移动元素时,浏览器仅会触发合成(composite),利用 GPU 加速操作图层,跳过布局和绘制阶段,性能更优。
- GPU 加速 :translate 的变换由 GPU 处理,适合高频次动画(如滚动、平移)
- 消除
相关文章:
css 知识点整理
1.css 层叠样式表 中的 inherit、initial、unset 关键字适用属性类型行为逻辑典型场景inherit所有属性强制继承父级值统一子元素样式initial所有属性重置为规范初始值清除自定义或继承样式unset所有属性自动判断继承或重置简化全局样式重置或覆盖 2. sass 常用语法 2.1、变量…...
02.Kubernetes 集群部署
Kubernetes 集群部署 Kubernetes 相关端口 1. Kubernetes 集群组件运行模式 独立组件模式 除 Add-ons 以外,各关键组件以二进制方式部署于节点上,并运行于守护进程;各 Add-ons 以 Pod 形式运行 静态 Pod 模式 控制平面各组件以静态 Pod …...
支持向量机(SVM)原理与应用
背景 支持向量机(Support Vector Machine, SVM)是一种经典的监督学习算法,广泛应用于分类和回归问题。SVM以其强大的数学基础和优异的性能在机器学习领域占据了重要地位。本文将详细介绍SVM的原理、核函数的作用以及如何在Python中使用SVM解决…...
【文献阅读】SPRec:用自我博弈打破大语言模型推荐的“同质化”困境
📜研究背景 在如今的信息洪流中,推荐系统已经成为了我们生活中的“贴心小助手”,无论是看电影、听音乐还是购物,推荐系统都在努力为我们提供个性化的内容。但这些看似贴心的推荐背后,其实隐藏着一个严重的问题——同质…...
【WRF模拟】如何查看 WPS 的输入静态地理数据(二进制格式)?
查看 WPS 的输入静态地理数据方法总结 方法 1:使用 gdal_translate 将二进制数据转换为 GeoTIFFgdal_translate 工具概述使用 gdal_translate 将二进制数据转换为 GeoTIFF方法 2:使用 ncdump 查看 geo_em.dXX.nc方法 3:使用 Python xarray + matplotlib 可视化 geo_em.dXX.n…...
介绍如何使用RDDM(残差噪声双扩散模型)进行知识蒸馏
下面为你详细介绍如何使用RDDM(残差噪声双扩散模型)进行知识蒸馏,从而实现学生RDDM模型的一步去噪。这里假定你已经有了RDDM模型,并且使用PyTorch深度学习框架。 整体思路 数据准备:加载训练数据并进行必要的预处理。…...
【lf中的git实战】
1)开发分支 develop 2)各种功能分支 author/feature_func 3)release分支 4)合并author/feature_func到develop author/feature_func 到 develop时: cd develop git merge --squash author/feature_func 5)develop合并到author/feature_func时: cd author/feature_func g…...
Java实现Consul/Nacos根据GPU型号、显存余量执行负载均衡
Java实现Consul/Nacos根据GPU型号、显存余量执行负载均衡 步骤一:服务端获取GPU元数据 1. 添加依赖 在pom.xml中引入Apache Commons Exec用于执行命令: <dependency><groupId>org.apache.commons</groupId><artifactId>comm…...
编译支持 RKmpp 和 RGA 的 ffmpeg 源码
一、前言 RK3588 支持VPU硬件解码,需要rkmpp进行调用;支持2D图像加速,需要 RGA 进行调用。 这两个库均能通过 ffmpeg-rockchip 进行间接调用,编译时需要开启对应的功能。 二、依赖安装 编译ffmpeg前需要编译 rkmpp 和 RGA…...
布隆过滤器(Bloom Filter)
布隆过滤器是一种概率型数据结构,用于快速判断一个元素是否可能在集合中存在。它的核心特点是: 节省空间:相比哈希表,布隆过滤器占用的存储空间非常小。高效查询:查询时间复杂度为 (O(k)),其中 (k) 是哈希…...
2025-03-10 学习记录--C/C++-C语言 易错点 大总结
C语言 易错点 大总结 一、strlen(strs) 使用错误 ⭐️ 若strs 是一个指针数组(const char* strs[]),则不可用strlen(strs) 计算 strs 的长度,因为 strlen 是用于计算 字符串 的长度,而不是数组的长度。 解决方法 &…...
康谋应用 | 基于多传感器融合的海洋数据采集系统
在海洋监测领域,基于无人艇能够实现高效、实时、自动化的海洋数据采集,从而为海洋环境保护、资源开发等提供有力支持。其中,无人艇的控制算法训练往往需要大量高质量的数据支持。然而,海洋数据采集也面临数据噪声和误差、数据融合…...
SpringMVC (二)请求处理
目录 章节简介 一 请求处理(初级) eg:请求头 二 请求处理(进阶) eg:请求体 三 获取请求头 四 获取Cookie 五 级联封装 六 使用RequestBoby封装JSON对象 七 文件的上传 八 获取整个请求 HttpEntity 九 原生请求 Spring…...
数据结构——单链表list
前言:大家好😍,本文主要介绍数据结构——单链表 目录 一、单链表 二、使用步骤 1.结构体定义 2.初始化 3.插入 3.1 头插 3.2 尾插 3.3 按位置插 四.删除 4.1头删 4.2 尾删 4.3 按位置删 4.4按值删 五 统计有效值个数 六 销毁…...
课程《Deep Learning Specialization》
在coursera上,Deep Learning Specialization 课程内容如下图所示: Week2 assignment, Logistic Regression....
低版本 Linux 系统通过二进制方式升级部署高版本 Docker
一、背景: 在一些 Linux 系统中,由于系统自带的软件源版本较低,或者因网络、权限等限制无法直接通过源文件来升级到最新版本的 Docker。这种情况下,采用二进制方式升级部署高版本 Docker 就成为一种有效的解决方案。下面将详…...
线索二叉树构造及遍历算法
线索二叉树构造以及遍历算法 线索二叉树(中序遍历版)构造线索二叉树构造双向线索链表遍历中序线索二叉树 线索二叉树(中序遍历版) 中序遍历找到对应结点的前驱(土方法) #mermaid-svg-eunGO5d2GhjLxCn5 {fo…...
3. 自定义类型****
目录 1. 内存对齐(必考) 如何计算? 为什么要内存对齐? 2. 联合 2.1 联合的定义 2.2 联合的特点 1. 内存对齐(必考) 结构体内存对齐是一个特别热门的考点。 如何计算? 第一个成员在与结构…...
Redis Sentinel (哨兵模式)深度解析:构建高可用分布式缓存系统的核心机制
一、传统主从复制的痛点 在分布式系统架构中,Redis 作为高性能缓存和数据存储解决方案,其可用性直接关系到整个系统的稳定性。传统的主从复制架构虽然实现了数据冗余,但在面临节点故障时仍存在明显缺陷: 手动故障转移…...
deepseek本地部署
deepseek本地部署 哈喽,兄弟们!大家可以想象一下,如果有一个超级聪明的人机大脑,能帮你解答任何问题,从复杂的数学难题到编程代码,再到那些让你头疼的写作任务,它都能轻松搞定。这不是科幻电影里的场景,而是DeepSeek带来的现实奇迹!DeepSeek,这个名字听起来就充满了…...
责任链模式的C++实现示例
核心思想 责任链模式是一种行为设计模式,允许多个对象都有机会处理请求,从而避免请求的发送者与接收者之间的耦合。请求沿着处理链传递,直到某个对象处理它为止。 解决的问题 解耦请求发送者与处理者:请求的发送者无需知道具…...
【蓝桥杯python研究生组备赛】003 贪心
题目1 股票买卖 给定一个长度为 N 的数组,数组中的第 i 个数字表示一个给定股票在第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易(多次买卖一支股票)。 注意:你不能同时参与多笔交易&…...
Banana Pi 与瑞萨电子携手共同推动开源创新:BPI-AI2N
2025年3月11日, Banana Pi 开源硬件平台很高兴宣布,与全球知名半导体解决方案供应商瑞萨电子(Renesas Electronics)正式达成技术合作关系。此次合作标志着双方将在开源技术、嵌入式系统和物联网等领域展开深度合作,为全…...
【算法工具】HDL: 基于摘要统计数据的高维连锁不平衡分析软件
## 前言 在基因组研究中,连锁不平衡(Linkage Disequilibrium, LD)分析是理解遗传变异之间关联的关键步骤。然而,当面对高维数据时,传统分析方法往往面临巨大计算挑战。今天为大家介绍一款强大的工具——HDL (High-Dimensional Linkage diseq…...
虚拟展览馆小程序:数字艺术与文化展示的新形式探索
虚拟展览馆小程序:数字艺术与文化展示的新形式探索 一、传统展览的痛点:物理空间的局限与数字化的必然 在传统的艺术与文化展览中,观众往往需要跨越地理距离、排队数小时才能进入展馆,而许多珍贵展品因保护需求无法长期展出。数据显示,全球90%以上的博物馆藏品常年沉睡于…...
docker 搭建alpine下nginx1.26/mysql8.0/php7.4环境
docker 搭建alpine下nginx1.26/mysql8.0/php7.4环境 docker-compose.yml services:mysql-8.0:container_name: mysql-8.0image: mysql:8.0restart: always#ports:#- "3306:3306"volumes:- ./etc/mysql/conf.d/mysql.cnf:/etc/mysql/conf.d/mysql.cnf:ro- ./var/log…...
java项目之基于ssm的在线学习系统(源码+文档)
项目简介 在线学习系统实现了以下功能: 该系统可以实现论坛管理,通知信息管理,学生管理,回答管理,教师管理,教案管理,公告信息管理,作业管理等功能。 💕💕作…...
macOS 安装配置 iTerm2 记录
都说 macOS 里替换终端最好的就是 iTerm2 ,这玩意儿还是开源的,所以就也根风学习一下,但全是英文的挺麻烦,所以这里记录一下自己的设置,以最简单的安装及设置为主,想要更酷炫、更好看的还请自己百度吧&…...
矩阵分析-浅要理解(深度学习方向)
梯度分析与最优化 在深度学习的任务中,我们所期望的是训练一个神经网络,使得预测结果与真实标签之间的误差最小化,这可以近似看作是一个提供梯度下降等优化找到全局最优解的凸优化问题。 奇异值分解 在信息工程领域,对数据处理的…...
Odoo 18 中的自动字段和预留字段
Odoo 18 中的自动字段和预留字段 作为一个开源平台,Odoo 的价值在于其使用和开发的灵活性、可扩展性和经济性。虽然 Odoo 本身主要用 Python 和 JavaScript 编写,但其作为开源 ERP 系统的价值超越了特定编程语言的范畴,为各行各业的企业提供了…...
【操作系统安全】任务1:操作系统部署
目录 一、VMware Workstation Pro 17 部署 二、VMware Workstation 联网方式 三、VMware 虚拟机安装流程 四、操作系统介绍 五、Kali 操作系统安装 六、Windows 系统安装 七、Windows 系统网络配置 八、Linux 网络配置 CSDN 原创主页:不羁https://blog.csd…...
Linux:自动化构建-make/Makefile
1.背景 一个工程中的源文件不计数,其按类型、功能、模块分别放在若干个目录中,makefile定义了一系列的规则来指定,哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译,甚至于进行更复杂的功能操作…...
maven wrapper的使用
写在前面 考虑这样的场景,张三创建了一个maven项目使用了3.9版本,当李四下载下来去开发配置的却是3.6版本,此时李四就不得不再去配置一个3.9版本的maven,为了解决这个问题,maven引入了maven wrapper的机制(…...
DB-GPT-0.7版本win11安装,最新版本,安装方式变更了
之前两天折腾要死,只因为安装了旧版本问题太多,现在安装最新版本 快速开始_V0.7.0 语雀 DB-GPT 0.7.0 部署教程 - yyhhyys blog DB-GPT 0.7.0 与 DeepSeek 集成使用指南 - yyhhyys blog 首先代码结构换了,python包管理工作也换了…...
树莓集团落子海南,如何重构数字产业生态体系
树莓集团在海南的布局,是其整体商业战略中的关键一环。这背后,是对政策机遇、产业协同、以及区域优势的深度考量。 政策机遇 海南自贸港建设带来前所未有的政策红利,包括贸易、投资、资金等方面的自由便利。树莓集团紧抓这一机遇࿰…...
Spring Boot 项目部署启动异常问题分析与解决:主类缺失与依赖冲突的分析
Spring Boot 项目部署启动异常问题分析与解决 在近期的 Spring Boot 项目部署工作中,遭遇了一起典型的启动异常状况。经过多维度的深入排查以及细致的调试,最终确定问题的根源在于打包插件配置与依赖管理的综合影响。以下将详细阐述整个问题的分析过程以及对应的解决办法。 …...
共享内存(System V)——进程通信
个人主页:敲上瘾-CSDN博客 进程通信: 匿名管道:进程池的制作(linux进程间通信,匿名管道... ...)-CSDN博客命名管道:命名管道——进程间通信-CSDN博客 目录 一、共享内存的原理 二、信道的建立 …...
考研数学非数竞赛复习之Stolz定理求解数列极限
在非数类大学生数学竞赛中,Stolz定理作为一种强大的工具,经常被用来解决和式数列极限的问题,也被誉为离散版的’洛必达’方法,它提供了一种简洁而有效的方法,使得原本复杂繁琐的极限计算过程变得直观明了。本文&#x…...
12 DHCP的内容和HTTP的改良
一、回顾 计算机分配相关身份 网络号、主机号 网络号内的主机识别 局部网通信网关 不同网络的通信DNS服务器 域名解析 因特网通信 二、DHCP协议 建议学习前看这个视频,14分钟,所有的知识点都有,很容易理解 1、理解 DHCP 的全称是 Dynam…...
多光谱相机数据采集过程中常见仪器
1.BF1515多光谱相机 2.VIX-N220推扫式可见光近红外高光谱相机 覆盖光谱范围:400-1000nm; 光谱分辨率:2nm; 设备配套软件:VIX-N220、XuanDo(用于调节相机推扫速度); 镜头调节所需材料:黑色条…...
【调研】olmOCR解析PDF
测试用例: olmOCR GOT-OCR 将最底下没有文字的部分,可能是样式解析出重复 olmOCR GOT-OCR 无重复 重复 速度上,olmOCR效果更快 效果上,olmOCR解析得到的内容排版更加清晰整齐,而且对于6份GOT-OCR有重复的测…...
蓝桥杯随笔练——二分模板
答案 #include <bits/stdc.h> //洛谷2249 using namespace std;const int N 1e610; int n,m; int a[N];int Array_Search(int a[],int len,int x) {int L 0,R len1;while(L1 < R){int mid (RL) >> 1;if(a[mid] < x ) L mid;else R mid;}if(a[R] x) r…...
【Golang】第三弹----运算符
笔上得来终觉浅,绝知此事要躬行 🔥 个人主页:星云爱编程 🔥 所属专栏:Golang 🌷追光的人,终会万丈光芒 🎉欢迎大家点赞👍评论📝收藏⭐文章 一、运算符介绍 运算符是一…...
MongoDB 聚合管道速成教程
一、引言 MongoDB 的聚合管道(Aggregation Pipeline)是一种强大的数据处理工具,它允许你对文档进行一系列的操作,如过滤、转换、分组和聚合等。聚合管道由多个管道组成,每个管道对输入的文档进行特定的处理࿰…...
「JavaScript深入」二进制数据处理详解「Blob、File、FileReader、ArrayBuffer、Typed Arrays、DataView」
二进制数据处理详解 1. Blob(Binary Large Object)Blob 的特性创建 BlobBlob 主要方法Blob 的应用 2. FileFile 对象的属性获取 File 对象 3. FileReader创建 FileReader主要方法主要事件文件上传与读取内容示例文件分块读取示例 4. ArrayBuffer 与 Type…...
信号处理之插值、抽取与多项滤波
信号处理之插值、抽取与多项滤波 一、问题背景 插值(Interpolation)与抽取(Decimation)是数字信号处理中采样率转换的核心操作: 插值:在信号中插入新样本以提高采样率( L L L倍)抽取:按比例 M M M降低采样率…...
关于WPS的Excel点击单元格打开别的文档的两种方法的探究
问题需求 目录和文件结构如下: E:\Dir_Level1 │ Level1.txt │ └─Dir_Level2│ Level2.txt│ master.xlsx│└─Dir_Level3Level3.txt现在要在master.xlsx点击单元格进而访问Level1.txt、Level2.txt、Level3.txt这些文件。 方法一:“单元格右键…...
蓝桥 2109统计子矩阵
问题描述 给定一个NM 的矩阵 A, 请你统计有多少个子矩阵 (最小 11, 最大 NM) 满足子矩阵中所有数的和不超过给定的整数 K ? 输入格式 第一行包含三个整数 N,M 和 K. 之后 NN 行每行包含 M 个整数, 代表矩阵 A. 输出格式 一个整数代表答案。 样例输入 3 4 10 1 2 3 4 5…...
AF3 make_fixed_size函数解读
AlphaFold3 data_transforms 模块的 make_fixed_size 函数的作用是将输入的蛋白质特征字典 protein 中的各个特征张量调整为固定大小。这是为了确保在批量处理时,所有特征张量的形状一致,从而避免形状不匹配的问题。 源代码: import itertools import torch from src.con…...
前端模块管理新思路:如何使用 Import Maps
前言 前端开发中,我们常常需要使用各种库和模块来构建功能丰富的应用。在传统方式中,管理这些库和模块的引用可能会有些繁琐。 幸运的是,Import Maps 的出现为我们提供了一种更简洁和高效的解决方案。今天我们就来聊聊如何使用 Import Maps。…...