前端Wind CSS面试题及参考答案
目录
标准盒模型与 IE 盒模型的区别是什么？如何通过 box-sizing 属性切换这两种盒模型？
如何计算一个元素在标准盒模型下的总宽度（包含 margin、padding、border）？
父元素高度塌陷的原因是什么？请列举至少 3 种清除浮动的方法。
方法一：使用 clear 属性
方法二：使用 BFC（块级格式化上下文）
方法三：使用伪元素
margin 负值的作用是什么？请举例说明其应用场景。
inline、block、inline-block 元素的特性差异是什么？它们各自的使用场景有哪些？
如何实现一个元素水平居中？请至少提供 4 种方案。
如何实现未知宽高元素的水平垂直居中？请至少提供 3 种方案。
position: absolute 的定位基准是什么？它与 position: fixed 有何区别？
z-index 生效的条件是什么？层叠上下文是如何形成的？
如何用 CSS 实现一个宽高比为 16:9 的自适应容器？
Flex 布局的主轴与交叉轴是如何定义的？flex-direction 的取值有哪些？
如何通过 Flex 实现 “左侧固定宽度，右侧自适应” 布局？
justify-content 和 align-items 分别控制什么方向的对齐？
Flex 项目中 flex: 1 的含义是什么？它等价于哪些属性的组合？
Grid 布局中 fr 单位的作用是什么？如何定义网格轨道？
如何实现一个三栏布局（两侧固定，中间自适应）？请至少提供 3 种方案。
Grid 的 grid-template-areas 属性如何实现复杂布局？
如何让 Grid 项目在单元格内水平和垂直居中？
对比 Flex 与 Grid 布局的适用场景及优缺点分别是什么？
如何用 Grid 实现响应式布局（如不同屏幕尺寸下自动调整列数）？
BFC 的特性有哪些？请举例说明 BFC 解决的实际问题（如 margin 合并）。
如何通过 BFC 避免浮动导致的父元素高度塌陷？
同一个 BFC 内的垂直 margin 为何会合并？如何避免这种合并？
BFC 区域为何不会与浮动元素重叠？请举例说明其应用场景。
解释 “包含块（Containing Block）” 的概念及其对定位的影响。
什么是层叠上下文？哪些属性会触发层叠上下文？
浏览器渲染过程中重排（Reflow）与重绘（Repaint）的区别是什么？有哪些优化策略？
CSS 中硬件加速的原理是什么？有哪些实现方式（如 transform 属性）？
CSS 选择器优先级计算规则是什么？比较 #id .class 与 div:hover 的优先级。
:nth-child (n) 与:nth-of-type (n) 的区别是什么？
属性选择器 [attr^="val"]、[attr$="val"]、[attr*="val"] 的作用差异是什么？
伪类:hover 与伪元素::after 的本质区别是什么？
如何通过 CSS 选择器选中表单中所有未填写的必填项（input:required:invalid）？
解释:not () 伪类的使用场景及它对优先级的影响
CSS 变量（Custom Properties）的优势是什么？如何用 JavaScript 动态修改 CSS 变量？
transform 属性支持哪些变换类型？transform 与 transition 如何配合实现动画？
如何用 clip-path 裁剪出圆形、多边形或自定义形状？
@media 媒体查询的常用参数有哪些？如何适配暗色模式？
aspect - ratio 属性的作用是什么？有哪些兼容性处理方案？
will - change 属性的优化原理是什么？使用时的注意事项有哪些？
如何用 CSS 实现渐变背景、阴影和模糊效果？
contain 属性的性能优化原理是什么？它的适用场景有哪些？
移动端 1 像素边框问题的成因是什么？有哪些解决方案？
1. 使用 transform 缩放
2. 使用 viewport 布局视口
3. 使用 SVG 边框
transition 与 animation 的区别是什么？它们各自的适用场景有哪些？
如何实现动画的暂停与重启（animation-play-state）？
如何通过 requestAnimationFrame 优化 CSS 动画性能？
列举 CSS 动画性能优化的常见手段（如减少重绘）。
CSS 预处理器（如 Sass/Less）的核心功能有哪些？
如何实现 CSS 模块化（如 CSS Modules 或 Scoped CSS）
PostCSS 的作用是什么？请举例说明常用插件（如 Autoprefixer）
对比 CSS - in - JS 方案与传统 CSS 的优缺点
常见浏览器兼容性问题有哪些？对应的解决方案是什么（如 IE 盒模型、Flex 兼容）
解释 FOUC（无样式内容闪烁）的成因是什么？有哪些避免方法
相关文章：
前端Wind CSS面试题及参考答案
目录 标准盒模型与 IE 盒模型的区别是什么？如何通过 box-sizing 属性切换这两种盒模型？ 如何计算一个元素在标准盒模型下的总宽度（包含 margin、padding、border）？ 父元素高度塌陷的原因是什么？请列举至少 3 种清除浮动的方法。 方法一：使用 clear 属性 方法二：使用…...
ROS melodic 安装 python3 cv_bridge
有时候，我们需要处理这些兼容性问题。此处列举我的过程，以供参考 mkdir -p my_ws_py39/src cd my_ws_py39 catkin_make_isolated-DPYTHON_EXECUTABLE/usr/bin/python3 \-DPYTHON_INCLUDE_DIR/usr/include/python3.8 \-DPYTHON_LIBRARY/usr/lib/x86_64-l…...
农用车一键启动工作原理
移动管家农用车一键启动的工作原理与普通汽车类似，主要依赖于无线射频识别技术（RFID）。以下是具体的工作步骤和原理： 智能钥匙识别： 车主携带智能钥匙靠近车辆时，钥匙通过发射射频信号与车辆进行交互。车辆…...
Swift 并发任务的协作式取消
在 Swift 并发（Swift Concurrency）中，任务（Task）不会被强行终止，而是采用**协作式取消（cooperative cancellation）**机制。这意味着任务会被标记为“已取消”，但是否真正…...
设计和布局硬件电路是嵌入式系统开发的重要环节
设计和布局硬件电路是嵌入式系统开发的重要环节，涉及从需求分析到原理图设计、PCB（印刷电路板）布局以及最终的硬件调试。以下是完整的流程和技术要点： 1. 硬件电路设计的基本流程 1.1 需求分析 明确功能需求：确定系统…...
防火墙虚拟系统实验
配置 [r1]interface GigabitEthernet 0/0/0 [r1-GigabitEthernet0/0/0]ip address 12.0.0.2 24 [r1]interface LoopBack 0 [r1-LoopBack0]ip address 100.1.1.1 24[fw]interface GigabitEthernet 0/0/0 [fw-GigabitEthernet0/0/0]service-manage all permit [fw]interfac…...
机器学习——KNN数据集划分
一、主要函数 sklearn.datasets.my_train_test_split() 该函数为Scikit-learn 中用于将数据集划分为训练集和测试集的函数，适用于机器学习模型的训练和验证。以下是详细解释： 1、函数签名 train_test_split(*arrays, # 输入的数据…...
C++基础系列【27】Raw String Literal
博主介绍：程序喵大人 35- 资深C/C/Rust/Android/iOS客户端开发10年大厂工作经验嵌入式/人工智能/自动驾驶/音视频/游戏开发入门级选手《C20高级编程》《C23高级编程》等多本书籍著译者更多原创精品文章，首发gzh，见文末👇…...
PyTorch核心基础知识点
PyTorch核心基础知识点，结合最新特性与工业级实践，按优先级和逻辑关系分层解析： ▍ 核心基石：张量编程（Tensor Programming） 1. 张量创建（8种生产级初始化） # 设备自动选择&#x…...
Springboot实现使用断点续传优化同步导入Excel
springboot实现使用断点续传优化同步导入Excel 需求前言断点续传前端实现后端实现完结撒花，如有需要收藏的看官，顺便也用发财的小手点点赞哈，如有错漏，也欢迎各位在评论区评论！ 需求前言 在跨境电商系统中，…...
1、正点原子ZYNQ最小系统--GPIO之MIO控制LED笔记
1、ZYNQ PS中的外设通过MIO连接到PS端引脚；通过EMIO连接到PL端引脚。 2、Zynq-7000有54个MIO，有64个EMIO。 3、GPIO分为4个Bank，其中Bank0和Bank1连接到MIO;Bank2和Bank3连接到EMIO。 4、Bank1--22bit；Bank0--32bit；…...
基于STM32进行FFT滤波
文章目录 一、前言背景二、项目构思1. 确定FFT点数、采样率、采样点数2. 双缓存设计 三、代码实现1. STM32CubeMX配置和HAL库初始化2. 核心代码 四、效果展示和后话 一、前言背景 STM32 对 AD 采样信号进行快速傅里叶变换（FFT），以获取其频谱…...
ISCA Archive 的 关于 dysarthria 的所有文章摘要（1996~2024）
ISCA Archive 的 关于 dysarthria 的所有文章摘要（1996~2024） 构音障碍（Dysarthria）研究全景总结（1996–2024） 所有文章摘要（1996~2024） ISCA Archive 的 关于 dysarthria 的所有文…...
MySQL拒绝访问
1. 问题 使用图形界面工具连接MySQL数据库，拒绝访问！ 2. 解决方法 以管理员的身份打开cmd，输入命令，启动MySQL net start mysql版本号 3. 参考 暂无...
ROM（只读存储器） 、SRAM（静态随机存储器） 和 Flash（闪存） 的详细解析
在嵌入式系统和其他计算机系统中，存储器是不可或缺的组成部分。不同类型的存储器各有其特点和应用场景。以下是 ROM（只读存储器）、SRAM（静态随机存储器） 和 Flash（闪存） 的详细解析。 1. ROM&am…...
Transformers x SwanLab:可视化NLP模型训练（2025最新版）
HuggingFace 的 Transformers 是目前最流行的深度学习训框架之一（100k Star），现在主流的大语言模型（LLaMa系列、Qwen系列、ChatGLM系列等）、自然语言处理模型（Bert系列）等，都在使用T…...
stm32-ADC
1.ADC:模拟到数字的转换器 1.1模拟 模拟信号：物理当中一切可感受到的都是模拟信号（连续的） 1.2数字： 数字信号：二进制数（离散的） 1.3a->c的过程 采样、量化 1.3.1量化的原理 方法&am…...
)
【1】Java 零基础入门学习(小白专用)
【1】Java 零基础入门学习 📚博客主页：代码探秘者 ✨专栏：《JavaSe从入门到精通》 其他更新ing… ❤️感谢大家点赞👍🏻收藏⭐评论✍🏻，您的三连就是我持续更新的动力❤️ 🙏作者水…...
《Python实战进阶》No26: CI/CD 流水线：GitHub Actions 与 Jenkins 集成
No26: CI/CD 流水线：GitHub Actions 与 Jenkins 集成 摘要 持续集成（CI）和持续部署（CD）是现代软件开发中不可或缺的实践，能够显著提升开发效率、减少错误并加速交付流程。本文将探讨如何利用 GitHub Actio…...
算力100问☞第92问：为什么各地热衷建设算力中心？
目录 1、宏观分析 2、政府角度分析 3、投资者角度分析 在数字化浪潮中，各地对算力中心建设的热情高涨，这一现象背后潜藏着诸多深层次的原因，涵盖了经济、科技、社会等多个维度，且彼此交织，共同驱动着这一发展趋势。 1、宏观分析 从经济结构转型的底层逻辑来看，全球经…...
w266农产品直卖平台的设计与实现
🙊作者简介：多年一线开发工作经验，原创团队，分享技术代码帮助学生学习，独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取，记得注明来意哦~🌹赠送计算机毕业设计600个选题excel文…...
OpenLayers集成天地图服务开发指南
以下是一份面向GIS初学者的OpenLayers开发详细教程，深度解析代码： 一、开发环境搭建 1.1 OpenLayers库引入 <!-- 使用CDN引入最新版OpenLayers --> <link rel"stylesheet" href"https://cdn.jsdelivr.net/npm/ollatest/ol.c…...
1、双指针法
关于每个知识点的例题 可以自己看力扣标准题解。也可以在哔哩哔哩上看。想看我的，就到github 看 - 库 ，介绍里写的算法讲解那些，里面有知识点，有题库。题库，每天都发题，可能跟博客的进度不一样。因为我上传…...
程序算法基础
程序设计基本概念 程序和算法 人们做任何事情都有一定的方法和程序，如：春节联欢晚会的节目单、开会的议程等，都是程序。在程序的指导下，可以有秩序地、有效的完成每一项工作。随着计算机的问世和普及，“程序”逐渐专…...
JavaScript基础-删除事件（解绑事件）
在现代Web开发中，动态地添加和移除事件处理器是构建交互式网页的关键技能之一。虽然添加事件处理器相对直观，但了解如何有效地移除或“解绑”这些处理器同样重要。这不仅有助于优化性能，还能防止潜在的内存泄漏问题。本文将介绍几种方法来删除…...
Selenium Web UI自动化测试：从入门到实战
引言 在当今快速迭代的软件开发周期中，自动化测试已成为保障产品质量、提升测试效率的核心手段之一。而针对Web应用的UI自动化测试，Selenium作为最流行的开源工具之一，凭借其跨浏览器、多语言支持（Python、Java、C#等）…...
AT_abc398_f [ABC398F] ABCBA
题目大意 请点击这里查看原题面。给定一个字符串 S S S，找出以 S S S 为前缀的最短回文字符串。 思路 观察样例三，容易发现只要寻找到一个合适的“对称轴”即可。可以考虑枚举对称轴位置，判断然后得到长度并计算答案串。但是这样显然会超…...
RK3568开发笔记-egtouch触摸屏ubuntu系统屏幕校准
目录 前言 一、官方egtouch触摸屏驱动校准 二、ubuntu系统xinput_calibrator工具校准 2.1. 工具安装 2.2. xinput_calibrator命令校准 总结 前言 在基于 RK3568 平台进行开发，并使用 egtouch 触摸屏搭配 ubuntu20.04 系统时，准确的屏幕校准对于良好的用户交互体验至关重要…...
使用uniapp的vite版本进行微信小程序开发，在项目中使用mqtt连接、订阅、发布信息
1、保证在微信公众平台配置socket合法域名 2、项目中使用mqtt 建议在package.json中配置"mqtt": “4.1.0”，使用这个版本的依赖 页面中引入mqtt并配置连接 // ts-ignoreimport * as mqtt from mqtt/dist/mqtt.js; //要使用这里面的const state reacti…...
【软件系统架构】单体架构
一、引言 在软件开发的漫长历程中，架构的选择一直是至关重要的决策。单体架构作为一种经典的架构模式，曾经在许多项目中发挥着不可替代的作用。虽然如今微服务等架构逐渐流行，但理解单体架构对于深入掌握软件架构体系仍然有着重要意义。 二、…...
强大的AI网站推荐（第三集）—— AskO3
网站：AskO3 号称：由华为全球技术服务部（GTS）基于盘古大模型构建的领域知识大模型 博主评价：学习网络安全必备的网站，ICT服务领域顶级AI网站，如果学习HCIA，园区配置等，也可…...
高速网络包处理，基础网络协议上内核态直接处理数据包，XDP技术的原理
文章目录 预备知识TCP/IP 网络模型（4层、7层）iptables/netfilterlinux网络为什么慢 DPDKXDPBFPeBPFXDPXDP 程序典型执行流通过网络协议栈的入包XDP 组成 使用 GO 编写 XDP 程序明确流程选择eBPF库编写eBPF代码编写Go代码动态更新黑名单 预备知识 TCP/IP…...
C++智能指针详解
C智能指针详解 目录 智能指针概述为什么需要智能指针C标准库中的智能指针 std::unique_ptrstd::shared_ptrstd::weak_ptr 智能指针的实际应用智能指针的最佳实践总结 智能指针概述 智能指针是C中用于自动管理动态分配内存的对象，它们遵循RAII（资源获…...
git 设置保存密码 git保存密码
目录 长久保存密码 长久保存密码 git push和git pull都能使用。 git config --global credential.helper store 然后执行一次 git pull，Git 会提示输入用户名和密码， 输入后保存路径： ~/.git-credentials ， Windows系统&…...
clamav服务器杀毒（Linux服务器断网状态下如何进行clamav安装、查杀）
ClamAV服务器杀毒（服务器断网状态也可以使用该方法） 服务器因为挖矿病毒入侵导致断网，进行离线的clamav安装并查杀 安装包下载网址：https://www.clamav.net/downloads 安装.deb，如果服务器处于断网状态，可以…...
深入剖析 RocketMQ 的 ConsumerOffsetManager
在消息队列系统中，准确记录和管理消息的消费进度是保障系统可靠性和数据一致性的关键。RocketMQ 作为一款高性能、高可用的分布式消息队列，其 ConsumerOffsetManager 组件在消费进度管理方面发挥着至关重要的作用。本文将详细介绍 ConsumerOffsetManager…...
一文了解 threejs 中.bin 文件与 .gltf 文件 和 .glb 文件三者之间的关系
文章目录 前言一、.bin 文件的作用二、.gltf 文件的作用三、.gltf 和 .bin 的关系四、.glb 文件的作用五、如何查看或编辑 .bin 文件六、总结 前言 在 GLTF 生态中，.bin 文件是 GLTF 格式的重要组成部分，通常与 .gltf 文件一起使用。以下是它们的详细关…...
蓝桥杯（N皇后问题）------回溯法
题目描述 在 NN 的方格棋盘放置了 N 个皇后，使得它们不相互攻击（即任意 2 个皇后不允许处在同一排，同一列，也不允许处在与棋盘边框成 45 角的斜线上。你的任务是，对于给定的 N，求出有多少种合法的放置方法…...
Linux系统中关闭Docker服务并禁止其开机自启 、docker 安装目录结构分析 | 【du -sh *】
文章目录 在Linux系统中关闭Docker服务并禁止其开机自启，具体步骤如下：适用于使用 systemd 的系统（如Ubuntu 16.04/CentOS 7等）适用于使用 SysVinit 或 Upstart 的旧版系统其他注意事项示例输出 linux 下 一条命令实现 统计各个目…...
免费下载 | 2025低空经济产业发展报告
低空经济概览 产业链条：低空经济产业链分为上游的低空经济基础设施（如空管系统、飞行基地等）、中游的低空制造（包括无人机、eVTOL、直升机等飞行器的设计、研发、生产）和下游的低空运营及飞行服务。低空经济以低空空域…...
单一职责原则开闭原则其他开发原则
一、单一职责原则（Single Responsibility Principle, SRP） 定义 一个类应该有且仅有一个引起它变化的原因（即一个类只负责一个职责）。 核心思想 高内聚：类的功能高度集中 低耦合：减少不同职责之间的相互影…...
（自用）yolo算法学习
1.难受中，看了教程过后无从下手啊 2.pycharm专业版成功就好 3.安装包时出先问题 (base) PS G:\pycharm\projects\yolo\yolov5> pip install opencv-python>4.1.1 Requirement already satisfied: opencv-python>4.1.1 in g:\anaconda\app\lib\site-packa…...
手机号登录与高并发思考
基础逻辑 一般来说这个验证码登录分为手机号、以及邮箱登录 手机号短信验证，以腾讯云SMS 服务为例： 这个操作无非对后端来说就是两个接口： 一个是获取验证码，这块后端生成6位数字expire_time 去推送到腾讯云sdk ，腾…...
Linux系统管理与编程07：任务驱动综合应用
兰生幽谷，不为莫服而不芳； 君子行义，不为莫知而止休。 [环境] windows11、centos9.9.2207、zabbix6、MobaXterm、Internet环境 [要求] zabbix6.0安装环境：Lamp（linux httpd mysql8.0 php） [步骤] 2 …...
12：表的内外连接
1. 内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选，前面学习的查询都是内连接，也是在开发过程中使用的最多的连接查询。 新的内连接的语法： select 字段 from 表1 inner join 表2 on 连接条件 and 其他条件; //通过…...
Mybatis的基础操作——03
写mybatis代码的方法有两种： 注解xml方式 本篇就介绍XML的方式 使用XML来配置映射语句能够实现复杂的SQL功能，也就是将sql语句写到XML配置文件中。 目录 一、配置XML文件的路径，在resources/mapper 的目录下 二、写持久层代码 1.添加mappe…...
在CentOS系统上运行Ruby on Rails应用的详细步骤
以下是AI生成，仅做备份。 1. 安装必要的依赖 在CentOS上，首先要安装一些基础的开发工具和依赖库，它们能确保后续的安装和运行过程顺利进行。 sudo yum update -y sudo yum install -y git gcc-c patch readline readline-devel zlib zlib-…...
《AI大模型趣味实战》第6集：基于大模型和RSS聚合打造个人新闻电台
《AI大模型趣味实战》第6集：基于大模型和RSS聚合打造个人新闻电台 摘要 本文将带您探索如何结合AI大模型和RSS聚合技术，打造一个功能丰富的个人新闻电台系统。我们将使用Python和PyQt5构建一个桌面应用程序，该应用可以从多个RSS源抓取新闻&…...
Unity 与 JavaScript 的通信交互：实现跨平台的双向通信
前言 在现代游戏开发和 Web 应用中，Unity 和 JavaScript 的结合越来越常见。Unity 是一个强大的跨平台游戏引擎，而 JavaScript 是 Web 开发的核心技术之一。通过 Unity 和 JavaScript 的通信交互，开发者可以实现从 Unity 到 Web 页面的功能扩…...
Sql Server 索引性能优化 分析以及分表
定位需优化语句 根据工具 skywking 或者开启慢查询日志 找到 慢sql 的语句根据 执行过程 来 判断 慢的原因 row filter 指标 看查了多少数据 比例多少 type 看下是单表 还是 join联表 比如 执行步骤多 没索引 优化方向 减少执行次数索引 没索引考虑加索引 加索引 尽量选择 i…...