css100个问题
一、基础概念
- CSS的全称及作用是什么?
- 行内样式、内部样式表、外部样式表的优先级?
- 解释CSS的层叠性(Cascading)
- CSS选择器优先级计算规则
- 伪类与伪元素的区别?举例说明
!important
的作用及使用注意事项- 如何继承父元素字体大小但避免继承其他属性?
- CSS变量(Custom Properties)的定义与使用场景
- 媒体查询(
@media
)的常见应用场景 - CSS预处理器(Sass/Less)的核心优势
二、盒模型与布局
- 标准盒模型 vs 怪异盒模型的区别
- 如何通过
box-sizing
控制盒模型? - 块级元素与行内元素的区别及常见标签
- 水平居中的5种实现方式
- 垂直居中的6种经典方案(Flex/Grid/定位等)
- BFC(块级格式化上下文)的触发条件与作用
- 清除浮动的原理与方法
margin
塌陷问题及解决方案position
各属性值的区别与应用场景z-index
工作原理及层叠上下文
三、Flexbox布局
- Flex容器与项目的核心属性
- 如何实现两端对齐布局?
flex: 1
的含义分解flex-grow
与flex-shrink
的计算规则- 实现圣杯布局的Flex方案
align-items
与align-content
的区别- 如何控制Flex项目的换行行为?
- Flex实现等高列布局的方法
- 绝对定位元素在Flex容器中的表现
- Flex布局的浏览器兼容性问题
四、Grid布局
- Grid布局的核心概念(轨道、单元格等)
- 显式网格与隐式网格的区别
fr
单位的计算规则- 实现12列网格布局的Grid方案
grid-area
的简写规则- 如何实现自适应图片画廊布局?
- Grid的自动排列(
auto-fit
vsauto-fill
) - 使用Grid实现圣杯布局
- 子网格(
subgrid
)的应用场景 - Grid与Flexbox的选择依据
五、响应式设计
- 移动优先(Mobile First)的设计原则
- 视口(viewport)的meta标签配置
- 响应式图片的实现方案(srcset/sizes)
- 媒体查询中
min-width
与max-width
的匹配规则 - 隐藏元素的多种方法及区别(
display
/visibility
/opacity) - 移动端1像素边框问题的解决方案
- 如何实现自适应正方形元素?
- 移动端点击延迟问题与解决方案
- REM布局的原理与实现步骤
- 响应式表格的优化策略
六、动画与过渡
transition
与animation
的区别- 如何实现无限循环动画?
- 贝塞尔曲线(cubic-bezier)的作用
- 硬件加速的原理与实现方式
will-change
属性的优化作用- 实现淡入淡出动画的两种方式
- 关键帧动画的百分比控制技巧
- 如何暂停CSS动画?
steps()
函数在帧动画中的应用- 动画性能优化注意事项
七、CSS进阶
- CSS模块化的实现方案(BEM/CSS Modules)
- 伪元素
::before
和::after
的常见用法 - CSS计数器(counter)的应用场景
- 自定义滚动条样式的方法
- 实现毛玻璃效果(backdrop-filter)
- CSS混合模式(mix-blend-mode)的用法
- 如何实现文字渐变色效果?
- 剪切路径(clip-path)的创意应用
- CSS自定义属性实现主题切换
- 使用
@supports
进行特性检测
八、性能与优化
- 哪些CSS属性会导致重排(Reflow)?
- 如何减少页面重绘(Repaint)?
- 使用
content-visibility
优化渲染性能 - 优化CSS选择器性能的规则
- 如何减少CSS文件体积?
- 异步加载CSS的方法
- 关键CSS(Critical CSS)的提取策略
- 预加载CSS资源的实现方式
- 浏览器渲染流程中CSS的阻塞行为
- CSS与GPU加速的适用场景
九、调试与兼容性
- 处理CSS样式不生效的调试步骤
- 浏览器私有前缀的作用与处理方案
- CSS Reset与Normalize.css的区别
- 多行文本溢出显示省略号的实现
- 解决iOS滑动卡顿的
-webkit-overflow-scrolling
- 处理Safari字体渲染差异的方法
- 检测并修复z-index层级混乱
- 移动端输入框聚焦样式问题处理
- 使用Feature Queries处理渐进增强
- 常见CSS Hacks技术(已过时,了解即可)
十、综合应用
- 实现一个三角形图标
- 纯CSS实现下拉菜单
- 实现吸顶(sticky)导航栏
- 自定义radio/checkbox样式
- 实现无限滚动的加载动画
- 构建响应式卡片网格布局
- 设计一个模态框(Modal)
- 制作平滑滚动锚点链接
- 实现图片懒加载的CSS辅助方案
- CSS最新特性(如:has()、容器查询)的了解程度
建议练习方式:
- 按模块逐个击破,手写代码验证
- 结合CodePen/Sandbox进行可视化调试
- 思考不同方案的优缺点及适用场景
- 关注CSS新特性规范(MDN文档)
相关文章:
css100个问题
一、基础概念 CSS的全称及作用是什么?行内样式、内部样式表、外部样式表的优先级?解释CSS的层叠性(Cascading)CSS选择器优先级计算规则伪类与伪元素的区别?举例说明!important的作用及使用注意事项如何继承父元素字体…...
js文字两端对齐
目录 一、问题 二、原因及解决方法 三、总结 一、问题 1.text-align: justify; 不就可以了吗?但是实际测试无效 二、原因及解决方法 1.原因:text-align只对非最后一行文字有效。只有一行文字时,text-align无效,要用text-alig…...
Java-面向对象-多态和抽象类
目录 什么是多态? 多态的优点 多态存在的三个必要条件 虚函数 重写 多态的实现方式 什么是抽象类? 继承抽象类 实现抽象方法 抽象类总结 什么是多态? 多态就是一个行为具有多种不同的表现形式。 举例: 我们按下 F1 键…...
前端性能优化:深入解析哈希算法与TypeScript实践
/ 示例:开放寻址哈希表核心实现 class OpenAddressingHashTable<T> {private size: number;private keys: (string | null)[];private values: (T | null)[];private tombstone Symbol(Deleted);constructor(size: number 53) {this.size size;this.keys …...
车架号查询车牌号接口如何用Java对接
一、什么是车架号查询车牌号接口? 车架号查询车牌号接口,即传入车架号,返回车牌号、车型编码、初次登记日期信息。车架号又称车辆VIN码,车辆识别码。 二、如何用Java对接该接口? 下面我们以阿里云接口为例࿰…...
linux input子系统深度剖析
input 就是输入的意思,因此 input 子系统就是管理输入的子系统,和 pinctrl 、 gpio 子系统 一样,都是 Linux 内核针对某一类设备而创建的框架。比如按键输入、键盘、鼠标、触摸屏等 等这些都属于输入设备,不同的输入设备…...
香蕉派 BPI-CM6 工业级核心板采用进迭时空K1 8核 RISC-V 芯片开发
BPI-CM6 产品介绍 香蕉派BPI-CM6是一款工业级RISC-V核心板,它采用SpacemiT K1 8核RISC-V芯片设计,CPU集成2.0 TOPs AI计算能力。8/16G DDR和8/16/32/128G eMMC。设计了板对板连接器,以增强稳定性,与树莓派CM4尺寸相同,…...
9.4分漏洞!Next.js Middleware鉴权绕过漏洞安全风险通告
今日,亚信安全CERT监控到安全社区研究人员发布安全通告,Next.js 存在一个授权绕过漏洞,编号为 CVE-2025-29927。攻击者可能通过发送精心构造的 x-middleware-subrequest 请求头绕过中间件安全控制,从而在未授权的情况下访问受保护…...
【Unity3D实现UI轮播效果】
系列文章目录 unity工具 文章目录 系列文章目录👉前言👉一、效果展示👉二、实现步骤👉2-1、搭建UI👉2-2、代码实现👉2-3、代码挂载使用👉三、扩展实现👉壁纸分享👉总结👉前言 功能需求如图所示,点击下一个按钮,所有卡片向右滚动,其中最后一张需要变更…...
谈谈 Webpack 中的 Loader 和 Plugin,它们的区别是什么?
Webpack Loader与Plugin深度解析 作为前端工程化的核心工具,Webpack的Loader和Plugin机制是其强大扩展能力的基石。 理解它们的差异和适用场景,是构建高效打包体系的关键。 我们将从底层原理到实际应用,深入剖析两者的区别。 核心概念对比…...
C#单例模式
单例模式 (Singleton),保证一个类仅有一个实例,并提供一个访问它的全局访问点。通常我们可以让一个全局变量使得一个对象被访问,但它不能防止你实例化对个对象,一个最好的办法就是,让类自身负责保护它的唯一实例。这个类可以保证没…...
Oracle 数据库通过exp/imp工具迁移指定数据表
项目需求:从prod数据库迁移和复制2个表(BANK_STATE,HBS)的数据到uat数据库环境。 数据库版本:Oracle Database 19c Enterprise Edition Release 19.0.0.0.0 迁移工具:客户端exp/imp工具 -- 执行命令 从Prod数据库导出数据exp us…...
MongoDB 与 Elasticsearch 使用场景区别及示例
一、核心定位差异 MongoDB 定位:通用型文档数据库,侧重数据的存储、事务管理及结构化查询,支持 ACID 事务。典型场景: 动态数据结构存储(如用户信息、商品详情)。需事务支持的场景…...
PyTorch生成式人工智能实战:从零打造创意引擎
PyTorch生成式人工智能实战:从零打造创意引擎 0. 前言1. 生成式人工智能1.1 生成式人工智能简介1.2 生成式人工智能技术 2. Python 与 PyTorch2.1 Python 编程语言2.2 PyTorch 深度学习库 3. 生成对抗网络3.1 生成对抗网络概述3.2 生成对抗网络应用 4. Transformer4…...
蓝桥杯高频考点——二分(含C++源码)
二分 基本框架整数查找(序列二分的模版题 建议先做)满分代码及思路solution 子串简写满分代码及思路solution 1(暴力 模拟双指针70分)solution 2(二分 AC) 管道满分代码及思路样例解释与思路分析solution 最…...
VUE3项目VITE打包优化
VUE3项目VITE打包优化 代码加密依赖配置效果对比图 自动导入依赖配置 代码压缩依赖配置效果对比图 图片压缩依赖配置效果对比图 字体压缩总结与实践运用效果 代码加密 依赖 npm install -D vite-plugin-bundle-obfuscator配置 import vitePluginBundleObfuscator from "…...
IP 分片重组与 TCP 会话重组
1. IP 分片重组(IP Fragmentation & Reassembly) (1)分片原因 当 IP 数据包长度超过 MTU(Maximum Transmission Unit)(如以太网默认 1500 字节)时,路由器或发送端会…...
《Python实战进阶》No34:卷积神经网络(CNN)图像分类实战
第34集:卷积神经网络(CNN)图像分类实战 摘要 卷积神经网络(CNN)是计算机视觉领域的核心技术,特别擅长处理图像分类任务。本集将深入讲解 CNN 的核心组件(卷积层、池化层、全连接层)…...
【Django】教程-1-安装+创建项目+目录结构介绍
欢迎关注我!后续会更新django教程。一周2-3更,欢迎跟进,本周会更新第一个Demo的单独一个模块的增删改查【Django】教程-4-一个增删改查的Demo【Django】教程-2-前端-目录结构介绍【Django】教程-3-数据库相关介绍 1.项目创建 1.1 安装 Djan…...
力扣DAY29 | 热100 | 删除链表的倒数第N个结点
前言 中等 √ 链表心得:考虑好边界情况。 题目 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 示例 1: 输入:head [1,2,3,4,5], n 2 输出:[1,2,3,5]示例 2: 输入&#…...
渗透测试过-关于学习Token、JWT、Cookie等验证授权方式的总结
关于学习Token、JWT、Cookie等验证授权方式的总结 目录 一、为什么Cookie无法防止CSRF攻击,而Token可以? 二、为什么无论采用Cookie-session的方式,还是Token(JWT)的方式,在一个浏览器里,同一个…...
C#从入门到精通(3)
目录 第九章 窗体 (1)From窗体 (2)MDI窗体 (3)继承窗体 第十章 控件 (1)控件常用操作 (2)Label控件 (3)Button控件 &…...
greenhill编译出现:3201原因错误
ecom800: 21Mar25 16:26:45.609351: No licenses available for ecom800 Reason: ecom800 (3201): The License Manager cannot be contacted. 解决方式:重新加载lincese驱动。 检查是否安装正确: 检查驱动是否正确识别: 以上检查都正常,…...
Docker 快速入门指南
Docker 快速入门指南 1. Docker 常用指令 Docker 是一个轻量级的容器化平台,可以帮助开发者快速构建、测试和部署应用程序。以下是一些常用的 Docker 命令。 1.1 镜像管理 # 搜索镜像 docker search <image_name># 拉取镜像 docker pull <image_name>…...
RISC-V AIA学习2---IMSIC
我在学习文档这章时,对技术术语不太理解,所以用比较恰当的比喻来让自己更好的理解。 比较通俗的理解: 将 RISC-V 系统比作一个工厂: hart → 工厂的一条独立生产线IMSIC → 每条生产线配备的「订单接收员」MSI 中断 → 客户通过…...
C#基础学习(五)函数中的ref和out
1. 引言:为什么需要ref和out? 问题背景:函数参数默认按值传递,值类型在函数内修改不影响外部变量;引用类型重新赋值时外部对象不变。核心作用:允许函数内部修改外部变量的值,实现“双向传参…...
【每日算法】Day 9-1:贪心算法精讲——区间调度与最优选择(C++实现)
掌握高效决策的核心思想!今日深入解析贪心算法的底层逻辑,聚焦区间调度与最优选择两大高频场景,结合大厂真题与严谨证明,彻底掌握“局部最优即全局最优”的算法哲学。 一、贪心算法核心思想 贪心算法(Greedy Algorit…...
Netty源码—8.编解码原理二
大纲 1.读数据入口 2.拆包原理 3.ByteToMessageDecoder解码步骤 4.解码器抽象的解码过程总结 5.Netty里常见的开箱即用的解码器 6.writeAndFlush()方法的大体步骤 7.MessageToByteEncoder的编码步骤 8.unsafe.write()写队列 9.unsafe.flush()刷新写队列 10.如何把对象…...
【踩坑系列】使用httpclient调用第三方接口返回javax.net.ssl.SSLHandshakeException异常
1. 踩坑经历 最近做了个需求,需要调用第三方接口获取数据,在联调时一直失败,代码抛出javax.net.ssl.SSLHandshakeException异常, 具体错误信息如下所示: javax.net.ssl.SSLHandshakeException: sun.security.validat…...
双目云台摄像头全方位监控方案
双目云台摄像头是一种具有两个镜头的摄像头设备,通常配备云台功能,能够实现水平和垂直方向的旋转,从而提供全方位的监控视角: 一、工作原理与特点 工作原理 :双目云台摄像头利用仿生学原理,通过两个标定后的…...
测谎仪策略思路
来源:【东吴金工 金工专题】“高频价量相关性拥抱CTA”系列研究(四):CPV因子期货版3.0—CPV测谎机 原创 高子剑 量化邻距离 2024年09月20日 14:37 该报告主要介绍了“高频价量相关性拥抱CTA”系列研究中CPV因子期货版的相关内容,…...
2025年移动端开发性能优化实践与趋势分析
启动速度优化 本质:缩短首次可见帧渲染时间。 方法: iOS:利用Core ML本地模型轻量化部署,减少云端等待。Android:强制启用SplashScreen API,通过setKeepOnScreenCondition控制动画时长。冷启动需将耗时操…...
VScode-i18n-ally-Vue
参考这篇文章,做Vue项目的国际化配置,本篇文章主要解释,下载了i18n之后,该如何对Vscode进行配置 https://juejin.cn/post/7271964525998309428 i18n Ally全局配置项 Vscode中安装i18n Ally插件,并设置其配置项&#…...
vue vue3 走马灯Carousel
背景: 在项目中需要展示多张图片,但在页面上只有一张图片的有限位置,此时考虑使用轮播图实现多张图片的展示。element组件官网有走马灯Carousel的组件详细介绍。 实现效果: 官网链接:点击跳转 核心代码: …...
Android设计模式之Builder模式
一、定义:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。 二、核心思想: 分离构造与表示:将对象的构建过程(如参数组合、校验逻辑)与对象本身分离。 链式调用:通…...
【时时三省】(C语言基础)关系运算符和关系表达式
山不在高,有仙则名。水不在深,有龙则灵。 ----CSDN 时时三省 在if语句中对关系表达式disc > 0进行判断。其中的“>”是一个比较符,用来对两个数值进行比较。在C语言中,比较符(或称比较运算符)称为关…...
运算放大器(二)运算放大器的选型与应用
1.运算放大器的工艺决定Vos和Ib 2.TI放大器的命名规律 3.TI精密放大器家族 4.精密运放的选型指南 5.高共模抑制比放大器 6.TI其他的精密放大器 7.选型时需考虑的问题 8.TI精密运放选型实例 先确定供电电压 9.确定放大器的步骤 参考: 注:本文出自对b…...
vulhub靶场jangow-01-1.0.1
启动靶机时点shift停在这个界面 点e进入编辑页面,把ro改成rw signie init/bin/bash Ctrlx保存,ip a查看网卡信息 vim /etc/network/interfaces 把enp0s17改为ens33,保存退出 重启靶机,nmap扫ip ip为192.168.93.179 nmap扫端口 扫…...
android 一步完成 aab 安装到手机
家人们谁懂!在 Android 系统安装 aab 应用超麻烦。满心期待快速体验,却发现 aab 无法直装,得先转为 apks 格式,这过程复杂易错。好不容易转好,还得安装 apks,一番折腾,时间与耐心全耗尽。别愁&a…...
mysqlworkbench导入.sql文件
1、MySQL Workbench 新建数据库 或者 在左侧导航栏的 Schemas 区域右键选择 Create Schema...输入数据库名称(例如 mydatabase),点击 Apply确认创建,点击 Finish 2、选择目标数据库 在左侧导航栏的 Schemas 列表中&a…...
pyqt 信号与槽
PySide6 信号与槽机制详解 引言 PySide6 是 Qt for Python 的官方绑定库,为 Python 提供了强大的 GUI 开发能力。其中,信号与槽(Signals and Slots) 机制是 Qt 事件处理系统的核心,它允许对象之间进行松耦合的通信&a…...
深入探索C++:从基础到实践
目录 引言 一、C 基础语法与特性 (一)命名空间(Namespace) 单独使用 嵌套使用 调用形式 (二)输入输出流(I/O Streams) (三)变量作用域 二、C 的…...
从零开始完成冒泡排序(0基础)——C语言版
文章目录 前言一、冒泡排序的基本思想二、冒泡排序的执行过程(一)第一轮排序(二)第二轮排序(三)第三轮排序(四)第四轮排序 三、冒泡排序的代码实现(C语言)&am…...
Echars插入的柱状图条形图,鼠标放在图上显示坐标值
只需要将axiosPointer改为cross axisPointer.type支持类型及作用: line:默认直线型指向线shadow:显示坐标轴方向的阴影区域cross:交叉线(横向纵向双线)none:不显示指向器inside:结合…...
机械臂如何稳稳上桌?Mujoco场景修改实操
视频讲解: 机械臂如何稳稳上桌?Mujoco场景修改实操 前面《常见机械臂模型不用找!Mujoco这儿都有!》中介绍的mujoco-menagerie中机械臂大多都是base_link放在地上的,这些场景往往和真实的场景对应不上,比如机…...
金融级密码管理器——抗内存扫描的密钥保险箱
目录 金融级密码管理器 —— 抗内存扫描的密钥保险箱一、模块概述与设计背景二、技术原理与设计目标2.1 关键安全原理2.2 设计目标三、系统架构设计3.1 系统架构图(Mermaid示意图)四、关键技术与安全策略4.1 密钥分割与加密存储4.2 动态内存随机化技术4.3 内存扫描检测与自动…...
如何查看 SQL Server 的兼容性级别
在 SQL Server 中,兼容性级别是一个非常重要的设置,它决定了数据库在特定版本的 SQL Server 中运行时所使用的行为和功能。不同版本的 SQL Server 可能会在 SQL 查询优化、索引、语法、错误处理等方面有差异,因此,设置正确的兼容性…...
AI for CFD入门指南(传承版)
AI for CFD入门指南 前言适用对象核心目标基础准备传承机制 AI for CFDLibtorch的介绍与使用方法PytorchAutogluon MakefileVscodeOpenFOAMParaviewGambit 前言 适用对象 新加入课题组的硕士/博士研究生对AICFD交叉领域感兴趣的本科生实习生需要快速上手组内研究工具的合作研…...
人工智能与网络安全
目录 1、人工智能的安全和安全的人工智能各有什么含义,如何解决 2、当人工智能技术应用于某一安全领域,会对该领域的攻守双方带来哪些机遇与挑战 3、ChatGPT原理 、ChatGPT的缺陷 ChatGPT的缺陷 4、人工智能与算力,风险挑战 应对 5、人…...
GPIO输出实验,控制LED灯
1.实验工具:FSMP1A开发板 核心板: 拓展板: 2.实验要求:编写汇编程序,实现三盏灯流水 程序代码: .text .global _start _start: 将RCC_MP_AHB4ENSET寄存器第4位设置为1,使能GPIO外设时钟 …...