当前位置： 首页 > article >正文

css100个问题

article 2026/2/16 5:10:22

一、基础概念

  1. CSS的全称及作用是什么？
  2. 行内样式、内部样式表、外部样式表的优先级？
  3. 解释CSS的层叠性（Cascading）
  4. CSS选择器优先级计算规则
  5. 伪类与伪元素的区别？举例说明
  6. !important的作用及使用注意事项
  7. 如何继承父元素字体大小但避免继承其他属性？
  8. CSS变量（Custom Properties）的定义与使用场景
  9. 媒体查询（@media）的常见应用场景
  10. CSS预处理器（Sass/Less）的核心优势

二、盒模型与布局

  1. 标准盒模型 vs 怪异盒模型的区别
  2. 如何通过box-sizing控制盒模型？
  3. 块级元素与行内元素的区别及常见标签
  4. 水平居中的5种实现方式
  5. 垂直居中的6种经典方案（Flex/Grid/定位等）
  6. BFC（块级格式化上下文）的触发条件与作用
  7. 清除浮动的原理与方法
  8. margin塌陷问题及解决方案
  9. position各属性值的区别与应用场景
  10. z-index工作原理及层叠上下文

三、Flexbox布局

  1. Flex容器与项目的核心属性
  2. 如何实现两端对齐布局？
  3. flex: 1的含义分解
  4. flex-grow与flex-shrink的计算规则
  5. 实现圣杯布局的Flex方案
  6. align-items与align-content的区别
  7. 如何控制Flex项目的换行行为？
  8. Flex实现等高列布局的方法
  9. 绝对定位元素在Flex容器中的表现
  10. Flex布局的浏览器兼容性问题

四、Grid布局

  1. Grid布局的核心概念（轨道、单元格等）
  2. 显式网格与隐式网格的区别
  3. fr单位的计算规则
  4. 实现12列网格布局的Grid方案
  5. grid-area的简写规则
  6. 如何实现自适应图片画廊布局？
  7. Grid的自动排列（auto-fit vs auto-fill）
  8. 使用Grid实现圣杯布局
  9. 子网格（subgrid）的应用场景
  10. Grid与Flexbox的选择依据

五、响应式设计

  1. 移动优先（Mobile First）的设计原则
  2. 视口（viewport）的meta标签配置
  3. 响应式图片的实现方案（srcset/sizes）
  4. 媒体查询中min-width与max-width的匹配规则
  5. 隐藏元素的多种方法及区别（display/visibility/opacity）
  6. 移动端1像素边框问题的解决方案
  7. 如何实现自适应正方形元素？
  8. 移动端点击延迟问题与解决方案
  9. REM布局的原理与实现步骤
  10. 响应式表格的优化策略

六、动画与过渡

  1. transition与animation的区别
  2. 如何实现无限循环动画？
  3. 贝塞尔曲线（cubic-bezier）的作用
  4. 硬件加速的原理与实现方式
  5. will-change属性的优化作用
  6. 实现淡入淡出动画的两种方式
  7. 关键帧动画的百分比控制技巧
  8. 如何暂停CSS动画？
  9. steps()函数在帧动画中的应用
  10. 动画性能优化注意事项

七、CSS进阶

  1. CSS模块化的实现方案（BEM/CSS Modules）
  2. 伪元素::before和::after的常见用法
  3. CSS计数器（counter）的应用场景
  4. 自定义滚动条样式的方法
  5. 实现毛玻璃效果（backdrop-filter）
  6. CSS混合模式（mix-blend-mode）的用法
  7. 如何实现文字渐变色效果？
  8. 剪切路径（clip-path）的创意应用
  9. CSS自定义属性实现主题切换
  10. 使用@supports进行特性检测

八、性能与优化

  1. 哪些CSS属性会导致重排（Reflow）？
  2. 如何减少页面重绘（Repaint）？
  3. 使用content-visibility优化渲染性能
  4. 优化CSS选择器性能的规则
  5. 如何减少CSS文件体积？
  6. 异步加载CSS的方法
  7. 关键CSS（Critical CSS）的提取策略
  8. 预加载CSS资源的实现方式
  9. 浏览器渲染流程中CSS的阻塞行为
  10. CSS与GPU加速的适用场景

九、调试与兼容性

  1. 处理CSS样式不生效的调试步骤
  2. 浏览器私有前缀的作用与处理方案
  3. CSS Reset与Normalize.css的区别
  4. 多行文本溢出显示省略号的实现
  5. 解决iOS滑动卡顿的-webkit-overflow-scrolling
  6. 处理Safari字体渲染差异的方法
  7. 检测并修复z-index层级混乱
  8. 移动端输入框聚焦样式问题处理
  9. 使用Feature Queries处理渐进增强
  10. 常见CSS Hacks技术（已过时，了解即可）

十、综合应用

  1. 实现一个三角形图标
  2. 纯CSS实现下拉菜单
  3. 实现吸顶（sticky）导航栏
  4. 自定义radio/checkbox样式
  5. 实现无限滚动的加载动画
  6. 构建响应式卡片网格布局
  7. 设计一个模态框（Modal）
  8. 制作平滑滚动锚点链接
  9. 实现图片懒加载的CSS辅助方案
  10. CSS最新特性（如:has()、容器查询）的了解程度

建议练习方式：

  1. 按模块逐个击破，手写代码验证
  2. 结合CodePen/Sandbox进行可视化调试
  3. 思考不同方案的优缺点及适用场景
  4. 关注CSS新特性规范（MDN文档）

相关文章：

css100个问题

一、基础概念 CSS的全称及作用是什么？行内样式、内部样式表、外部样式表的优先级？解释CSS的层叠性（Cascading）CSS选择器优先级计算规则伪类与伪元素的区别？举例说明!important的作用及使用注意事项如何继承父元素字体…...

编程日记 2026/2/14 14:20:33

塔能科技：用精准节能撬动社会效益的行业杠杆

在全球积极践行可持续发展理念的当下，能源高效利用与节能减排，已然成为各行各业实现高质量发展绕不开的关键命题。对企业来说，节能早已不是一道可做可不做的选择题，而是关乎生存与发展、社会责任与竞争力的必答题。塔能科技推出的…...

编程日记 2026/2/14 1:45:58

Java 大视界 -- Java 大数据在自动驾驶高精度地图数据更新与优化中的技术应用（157）

💖亲爱的朋友们，热烈欢迎来到 青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2026/2/14 8:53:14

Conda配置Python环境

1. 安装 Conda 选择发行版： Anaconda：适合需要预装大量科学计算包的用户（体积较大）。 Miniconda：轻量版，仅包含 Conda 和 Python（推荐自行安装所需包）。 验证安装： co…...

编程日记 2026/2/12 23:25:34

nginx https配置

一.https配置 HTTPS 协议是由HTTP 加上TLS/SSL 协议构建的可进行加密传输、身份认证的网络协议，主要通过数字证书、加密算法、非对称密钥等技术完成互联网数据传输加密，实现互联网传输安全保护。 1.生成证书 openssl genrsa -des3 -out server.key 20…...

编程日记 2026/2/15 22:23:16

每日一题洛谷P10901 [蓝桥杯 2024 省 C] 封闭图形个数c++

排序思想&#xff0c;只不过这时的排序与之前的略有不同&#xff0c;com函数中要先比较封闭图形再比较真实的大小&#xff0c;多了一步&#xff0c;但是原理还是一样的 #include<iostream> #include<algorithm> #include<vector> using namespace std; //统…...

编程日记 2026/2/1 20:17:15

拓展知识六：MetInfo6.0.0目录遍历漏洞原理分析

所需进行代码审计的文件路径&#xff1a; C:\phpStudy\WWW\MetInfo6.0.0\include\thumb.php C:\phpStudy\WWW\MetInfo6.0.0\app\system\entrance.php C:\phpStudy\WWW\MetInfo6.0.0\app\system\include\class\load.class.php C:\phpStudy\WWW\MetInfo6.0.0\app\system\include…...

编程日记 2025/12/9 6:57:03

tar包部署rabbitMQ

部署erlang&#xff1a; 有网使用&#xff1a; sudo apt-get update sudo apt-get install libncurses5-dev libncursesw5-dev sudo yum install ncurses-devel 无网使用 tar zxvf ncurses.tar.gz mkdir ncurses cd ncurses-6.3/ ./configure --with-shared --without-debu…...

编程日记 2026/1/26 13:24:52

天锐蓝盾终端安全防护——企业终端设备安全管控

从办公室的台式电脑到员工手中的移动终端&#xff0c;这些设备不仅是工作的得力助手&#xff0c;更是企业数据的重要载体。然而&#xff0c;随着终端设备的广泛使用&#xff0c;安全风险也如影随形。硬件设备使用不当、数据随意传输等问题频发&#xff0c;使得企业数据面临着泄…...

编程日记 2026/2/14 13:35:07

MySQL高级特性与大数据应用

事务与锁机制 1.1 事务控制 START TRANSACTION; UPDATE account SET balance balance - 500 WHERE user_id 1001; UPDATE account SET balance balance 500 WHERE user_id 2002; COMMIT; -- 显式提交事务 ROLLBACK; -- 异常时回滚 1.2 锁机制 ​锁类型&#xff1a;共…...

编程日记 2026/1/14 9:12:55

小智机器人关键函数解析，Application::OutputAudio()处理音频数据的输出的函数

以下是对 Application::OutputAudio() 函数的详细解释&#xff1a; 源码&#xff1a; void Application::OutputAudio() { // 扬声器的输出auto now std::chrono::steady_clock::now();auto codec Board::GetInstance().GetAudioCodec();const int max_silence_seconds 10;…...

编程日记 2026/1/24 1:16:50

玛卡巴卡的k8s知识点问答题（五）

17. Init 类型容器有什么特点&#xff0c;主要用途&#xff1f; 特点&#xff1a; 启动顺序&#xff1a;Init 容器在普通容器启动之前运行&#xff0c;必须先完成所有 Init 容器后&#xff0c;Pod 的主容器才会启动。 顺序执行&#xff1a;如果定义了多个 Init 容器&#xff…...

编程日记 2026/1/27 7:12:12

3.27学习总结 爬虫+二维数组+Object类常用方法

高精度&#xff1a; 一个很大的整数&#xff0c;以字符串的形式进行接收&#xff0c;并将每一位数存储在数组内&#xff0c;例如100&#xff0c;即存储为[1][0][0]。 p2437蜜蜂路线 每一个的路线数前两个数的路线数相加。 #include <stdio.h> int a[1005][1005]; int …...

编程日记 2026/2/14 21:33:46

kafka零拷贝技术的底层实现

什么是 Sendfile&#xff1f; sendfile 是一种操作系统提供的系统调用&#xff08;system call&#xff09;&#xff0c;用于在两个文件描述符&#xff08;file descriptor&#xff09;之间高效传输数据。它最初由 Linux 内核引入&#xff08;从 2.1 版本开始&#xff09;&…...

编程日记 2026/1/24 15:48:26

MFC中CMap类的用法和原理

1、CMap 的原理 CMap 是一个基于哈希表的映射类&#xff0c;它将唯一键映射到对应的值。其内部实现依赖于哈希算法&#xff0c;通过哈希函数将键转换为哈希值&#xff0c;然后将哈希值映射到哈希表中的某个位置。如果多个键的哈希值相同&#xff08;即哈希冲突&#xff09;&am…...

编程日记 2026/1/15 20:37:08

elementplus的el-tabs路由式

在使用 Element Plus 的 el-tabs 组件&#xff0c;实现路由式的切换&#xff08;即点击标签页来切换不同的路由页面&#xff09;。下面是一个基于 Vue 3 和 Element Plus 实现路由式 el-tabs 的基本步骤和示例。 步骤 1: 安装必要的库 在vue3项目安装 Vue Router 和 Element …...

编程日记 2026/2/15 14:56:19

数据结构初阶：单链表

序言&#xff1a; 本篇博客主要介绍单链表的基本概念&#xff0c;包括如何定义和初始化单链表&#xff0c;以及如何进行数据的插入&#xff0c;删除和销毁等操作。 1.单链表 1.1 概念与结构 概念&#xff1a;链表是一种非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过…...

编程日记 2026/2/15 13:45:18

北斗导航 ｜ 改进伪距残差矢量的接收机自主完好性监测算法原理，公式，应用，RAIM算法研究综述，matlab代码

改进伪距残差矢量的接收机自主完好性监测算法研究 摘要 接收机自主完好性监测（RAIM）是保障全球卫星导航系统（GNSS）可靠性的核心技术。本文针对传统伪距残差矢量法在微小故障检测和多故障隔离中的不足，提出一种融合加权奇偶空间与动态阈值调整的改进算法。通过理论推导验证…...

编程日记 2026/2/7 3:08:44

RabbitMQ高级特性--TTL和死信队列

目录 1.TTL 1.1设置消息的TTL 1.1.1配置交换机&队列 1.1.2发送消息 1.1.3运行程序观察结果 1.2设置队列的TTL 1.2.1配置队列和交换机的绑定关系 1.2.2发送消息 1.2.3运行程序观察结果 1.3两者区别 2.死信队列 2.1 声名队列和交换机 2.2正常队列绑定死信交换机 …...

编程日记 2026/2/13 5:01:34

Java后端开发： 如何安装搭建Java开发环境《安装JDK》和 检测JDK版本

文章目录 一、JDK的安装1、 打开 Oracle 官方网址2、点击产品 二、检测JDK是否安装成功以及JDK版本的查看1. 打开命令行窗口检测是否安装成功查看 JDK 版本 一、JDK的安装 1、 打开 Oracle 官方网址 Oracle官网地址:https://www.oracle.com/cn/ 2、点击产品 打开下载的JDK文件…...

编程日记 2026/2/15 12:05:53

LabVIEW液压控制系统开发要点

液压控制系统开发需兼顾高实时性、强抗干扰性和安全性&#xff0c;尤其在重工业场景中&#xff0c;毫秒级响应延迟或数据异常都可能导致设备损坏。本文以某钢厂液压升降平台项目为例&#xff0c;从硬件选型、控制算法、安全机制三方面&#xff0c;详解LabVIEW开发中的关键问题与…...

编程日记 2026/2/14 23:43:34

鸿蒙Flutter实战：18-组合而非替换，现有插件快速鸿蒙化

引言 在对插件鸿蒙化时&#xff0c;除了往期文章现有Flutter项目支持鸿蒙II中讲到的使用 dependency_overrides 来配置鸿蒙适配库的两种方式以外&#xff0c;如果三方插件本身使用了联合插件的形式&#xff0c;也可以通过下面这种方式来添加鸿蒙平台的实现&#xff1a; depen…...

编程日记 2026/2/13 18:53:37

Qt之Service开发

一、概述 基于Qt的用于开发系统服务(守护进程)和后台服务，有以下几个优秀的开源 QtService 框架和库。 1. QtService (官方解决方案) GitHub: https://github.com/qtproject/qt-solutions/tree/master/qtservice 特点： 官方提供的服务框架 支持 Windows 服务和 Linux 守护…...

编程日记 2026/2/15 1:32:12

MFC添加免费版大漠3.1233

先创建一个MFC工程&#xff0c; 添加dm.dll 方法一&#xff1a;通过类向导-添加类-类型库中的MFC类-文件&#xff0c;选择dm.dll&#xff0c;如果没有"添加类型库中的MFC类"选项就用方法二添加 方法二&#xff1a;添加-新建项-MFC-Active或TypeLib-实现接口位置选…...

编程日记 2026/2/14 12:31:16

vue 图片放大到全局

背景&#xff1a; 在vue项目中&#xff0c;el-image组件图片组件用于展示图片&#xff0c;组件自带的属性preview-teleported&#xff0c;设置为true可以控制图片放大到全局 实现效果&#xff1a; 核心代码&#xff1a; //图片地址&#xff1a;BASEUrl /file/ item.file //这…...

编程日记 2026/2/13 20:19:15

人工智能入门（1）

人工智能导引 文章目录 人工智能导引artifiicial intelligence由图灵测试出发的六个领域贝叶斯方法分析成为大多数AI系统中不确定推理的现代方法基础 研究方法 机器学习计算机利用已经有的数据样本&#xff0c;得出某种规律模型&#xff0c;并利用模型预测未来的一种方法 回归算…...

编程日记 2026/1/23 20:02:34

Python爬虫：Feapder 的详细使用和案例

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 1. Feapder 概述1.1 Feapder介绍1.2 Feapder 核心特点1.3 Feapder 主要组件1.4 Feapder的安装2. 基础爬虫编写2.1 创建爬虫2.2 运行爬虫3. 数据采集案例3.1 新闻网站采集3.2 电商商品采集3.3 使用 Spider 类创建更强大爬…...

编程日记 2026/1/26 16:21:16

mybatis里in关键字拼接id问题

我们一般会把ids集合用StrUtil.join(‘,’)转成"1,2,3"这种形式 然后放入in中 我们会这么写: select id, nick_name, icon from tb_user where id in (#{ids}) order by FIELD(id, #{ids})结果发现sql执行是这样的: select id, nick_name, icon from tb_user where…...

编程日记 2026/2/12 22:14:50

在rockylinux9.4安装mongodb报错：缺少：libcrypto.so.10文件库

问题点&#xff1a; rockylinux9.4系统环境报错&#xff1a; ./mongod: error while loading shared libraries: libcrypto.so.10: cannot open shared object file: No such file or directory 解决方法&#xff1a; Ps&#xff1a;解压之后&#xff0c;检查mongodb的依赖环境…...

编程日记 2026/2/14 13:11:18

Spring Boot集成阿里云OSS：对象存储实战指南

Spring Boot集成阿里云OSS&#xff1a;对象存储实战指南 1. OSS是什么&#xff1f;为什么选择阿里云OSS&#xff1f; 对象存储&#xff08;OSS&#xff09; 是一种用于存储非结构化数据&#xff08;如图片、视频、日志文件&#xff09;的云服务&#xff0c;核心功能包括&#…...

编程日记 2026/1/22 3:30:55