《前端面试题之 CSS篇(第一集)》
目录
- 1、CSS的盒模型
- 2、CSS选择器及其优先级
- 3、隐藏元素的方法有那些
- 4、px、em、rem的区别及使用场景
- 5、重排、重绘有什么区别
- 6、水平垂直居中的实现
- 7、CSS中可继承与不可继承属性有哪些
- 8、Sass、Less 是什么?为什么要使用他们?
- 9、CSS预处理器/后处理器是什么?为什么要使用它们?
- 10、CSS3新特性
- 11、rem是如何做适配的
- 12、移动端兼容性问题
- 13、display的属性值及其作用
- 14、display的block、inline和inline-block的区别
1、CSS的盒模型
2、CSS选择器及其优先级
-
对于选择器的优先级:
内联样式:1000
id 选择器:100
类选择器、伪类选择器、属性选择器:10
标签选择器、伪元素选择器:1 -
注意事项:
!important声明的样式的优先级最高;
如果优先级相同,则最后出现的样式生效;
继承得到的样式的优先级最低;
通用选择器(*)、子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以它们的权值都为 0 ;
样式表的来源不同时,优先级顺序为:内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 >浏览器默认样式。
3、隐藏元素的方法有那些
4、px、em、rem的区别及使用场景
5、重排、重绘有什么区别
6、水平垂直居中的实现
7、CSS中可继承与不可继承属性有哪些
8、Sass、Less 是什么?为什么要使用他们?
9、CSS预处理器/后处理器是什么?为什么要使用它们?
10、CSS3新特性
11、rem是如何做适配的
主要功能是实现响应式布局的适配,确保在不同设备和屏幕宽度下,页面的布局和字体大小能够自适应。通过动态设置 rem单位和检测设备特性,代码可以解决高清屏上的 1px 边框问题,并确保布局的一致性。
(function flexible(window, document) {// 首先是一个立即执行函数,执行的时候传入参数window和documentvar docEl = document.documentElement; // 返回文档的root元素,即根元素htmlvar dpr = window.devicePixelRatio || 1; // 获取设备的dpr,即当前设置下物理像素与虚拟像素的比值// 调整body标签的fontSize// 设置默认字体的大小,默认字体的大小继承自bodyfunction setBodyFontSize() {if (document.body) {// 如果document.body存在,则直接设置body的字体大小document.body.style.fontSize = (12 * dpr) + 'px';} else {// 如果document.body不存在,则等待DOM加载完成后设置document.addEventListener('DOMContentLoaded', setBodyFontSize);}}setBodyFontSize(); // 调用函数设置body的字体大小// 设置 1rem = viewWidth / 10function setRemUnit() {var rem = docEl.clientWidth / 10; // 计算rem的值,将viewportWidth分为10份docEl.style.fontSize = rem + 'px'; // 设置html元素的字体大小为rem}setRemUnit(); // 调用函数设置rem单位// 在页面resize或者pageshow时重新设置remwindow.addEventListener('resize', setRemUnit); // 窗口大小变化时重新设置remwindow.addEventListener('pageshow', function (e) {if (e.persisted) { // 某些浏览器,重新展示页面时,走的是页面展示缓存setRemUnit(); // 重新设置rem单位}});// 检测0.5px的支持,支持则root元素的class有hairlines// 解决1px在高清屏多像素问题if (dpr >= 2) { // 如果设备像素比大于等于2var fakeBody = document.createElement('body'); // 创建一个虚拟的body元素var testElement = document.createElement('div'); // 创建一个测试元素testElement.style.border = '.5px solid transparent'; // 设置测试元素的边框为0.5pxfakeBody.appendChild(testElement); // 将测试元素添加到虚拟body中docEl.appendChild(fakeBody); // 将虚拟body添加到文档中if (testElement.offsetHeight === 1) { // 检测测试元素的高度是否为1docEl.classList.add('hairlines'); // 如果支持0.5px,则为html元素添加hairlines类}docEl.removeChild(fakeBody); // 移除虚拟body}
})(window, document);
12、移动端兼容性问题
13、display的属性值及其作用
14、display的block、inline和inline-block的区别
相关文章:
《前端面试题之 CSS篇(第一集)》
目录 1、CSS的盒模型2、CSS选择器及其优先级3、隐藏元素的方法有那些4、px、em、rem的区别及使用场景5、重排、重绘有什么区别6、水平垂直居中的实现7、CSS中可继承与不可继承属性有哪些8、Sass、Less 是什么?为什么要使用他们?9、CSS预处理器/后处理器是…...
第九天 开始Unity Shader的学习之单张纹理
Unity Shader的学习笔记 第九天 开始Unity Shader的学习之单张纹理 文章目录 Unity Shader的学习笔记前言一、基础纹理二、单张纹理① Properties② Cg代码块的变量③ 顶点着色器和片元着色器的结构体(a2v 和 v2f)④ 顶点着色器vert⑤ 片元着色器 frag效果展示 总结 前言 前几…...
Linux-内核驱动-led
登记设备号(后面可以动态分配) 自己定义内核函数 登记设备名字和功能 exit和init在内核启动自动执行 这样定义直接操作物理地址 ioctl 定义了设备文件的各种操作,并准备将其注册到内核中。 代码中声明了一个cdev结构体变量cdev,这…...
Web 项目实战:构建属于自己的博客系统
目录 项目效果演示 代码 Gitee 地址 1. 准备工作 1.1 建表 1.2 引入 MyBatis-plus 依赖 1.3 配置数据库连接 1.4 项目架构 2. 实体类准备 - pojo 包 2.1 dataobject 包 2.2 request 包 2.3 response 包 2.3.1 统一响应结果类 - Result 2.3.2 用户登录响应类 2.3.3…...
C++算法(1):stringstream详解,高效字符串处理与类型转换的利器
什么是stringstream? stringstream是C标准库中的一个类,定义在<sstream>头文件中。它提供了一种方便的方式来处理字符串与其他数据类型之间的转换和格式化操作。stringstream结合了istringstream和ostringstream的功能,既可以用于输入…...
【前端】【css】flex布局详解
Flex 布局(Flexible Box Layout,弹性盒子布局)是 CSS3 中的一种布局模式,用于在容器中更高效地分配空间并对齐内容,即使它们的大小是动态未知的。它非常适用于响应式设计。 一、Flex 布局的基本概念 1. 启用 Flex 布局…...
Python Cookbook-5.15 根据姓的首字母将人名排序和分组
任务 想将一组人名写入一个地址簿,同时还希望地址簿能够根据姓的首字母进行分组,且按照字母顺序表排序。 解决方案 Python 2.4 的新 itertools.groupby 函数使得这个任务很简单: import itertools def qroupnames(name_iterable):sorted_names sort…...
深入探析C#设计模式:访问者模式(Visitor Pattern)的原理与应用
引言 在软件开发中,设计模式为我们提供了高效、可维护的解决方案。而在众多设计模式中,访问者模式(Visitor Pattern)以其独特的结构和应用场景,在复杂系统中发挥着重要作用。本文将深入讲解访问者模式的定义、原理、优…...
2025蓝桥杯省赛C/C++研究生组游记
前言 至少半年没写算法题了,手生了不少,由于python写太多导致行末老是忘记打分号,printf老是忘记写f,for和if的括号也老是忘写,差点连&&和||都忘记了。 题目都是回忆版本,可能有不准确的地方。 …...
RPA VS AI Agent
图片来源网络 RPA(机器人流程自动化)和AI Agent(人工智能代理)在自动化和智能化领域各自扮演着重要角色,但它们之间存在显著的区别。以下是对两者区别的详细分析: 一、定义与核心功能 RPA(机…...
软件信息化项目等级分类评定表
对信息化项目进行分类评级管理,能够优化资源配置、保障项目成效。可从项目性质、规模、战略价值等维度分类,依据技术、风险、收益等指标评级,进而实现精细化管理。 分类管理 按项目性质分类:可分为业务流程优化项目,如优化企业采购流程的信息化项目,旨在提升效率;还有信…...
从0~1搭建自动化备份全网服务器数据平台
目录 摘要: 一、项目背景 1.1 rsync简介 作用: 特点: 语法: 1.2 项目需求 配置需求: 二、项目环境 2.1 项目拓扑结构 2.2 软硬件环境清单 三、任务清单 3.1 项目环境搭建 3.2 服务器部署 Web服务器搭建部署&#…...
用户态视角理解内核ROP利用:快速从shell到root的进阶
用户态视角理解内核ROP利用:快速从shell到root的进阶 一、摘要 本文仅限于快速从用户态向内核态入门,可能会有很多不严谨的地方,存在问题请及时告知感谢!本文旨在通过对比用户态 ROP 利用和内核 ROP 利用,揭示两者在利用手法上的相似性。通过分析用户态漏洞利用的流程,结合…...
我又叕叕叕更新了~纯手工编写C++画图,有注释~
本次更新内容: 优化性能,朗读 提前申明:如果运行不了,请到主页查看RedpandaDevc++下载,若还是不行就卸了重装。 版本号:1.26.36 779行 24690字 最终结果预览 代码预览 //版本号 :v1.26.36 //最终归属权为作者(饼干帅成渣)所有 //禁止转载 //仅供学习,不得用于违法 #…...
【家政平台开发(37)】家政平台蜕变记:性能优化与代码重构揭秘
本【家政平台开发】专栏聚焦家政平台从 0 到 1 的全流程打造。从前期需求分析,剖析家政行业现状、挖掘用户需求与梳理功能要点,到系统设计阶段的架构选型、数据库构建,再到开发阶段各模块逐一实现。涵盖移动与 PC 端设计、接口开发及性能优化,测试阶段多维度保障平台质量,…...
基于springboot+vue的秦皇岛旅游景点管理系统
开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9 系统展示 用户登录 旅游路…...
图像预处理-翻转与仿射变换
一.图像翻转 cv2.flip(img,flipcode) 参数 - flipcode : 指定翻转类型的标志,为0,表示沿x轴翻转,>0(默认1) 表示沿y轴翻转,为 <0(默认-1) 表示水平垂直翻转 OpenCV中,图片的镜像旋转以图像的中心为原点 impo…...
[ABC400F] Happy Birthday! 3 题解
考虑正难则反。问题转化为: 一个环上有 n n n 个物品,颜色分别为 c o l i col_i coli,每次操作选择两个数 i , j i, j i,j 使得 ∀ k ∈ [ i , j ] , c o l k c o l i ∨ c o l k 0 \forall k \in [i, j], col_k col_i \lor col_k …...
使用nuxt3+tailwindcss4+@nuxt/content3在页面渲染 markdown 文档
nuxt3tailwindcss在页面渲染 markdown 文档 页面效果 依赖 “nuxt/content”: “^3.4.0” “tailwindcss”: “^4.0.10” “nuxt”: “^3.16.2” “tailwindcss/vite”: “^4.0.10” tailwindcss/typography (这个是格式化 md 样式用的) 注意: 这里nuxt/content…...
畅游Diffusion数字人(23):字节最新表情+动作模仿视频生成DreamActor-M1
畅游Diffusion数字人(0):专栏文章导航 前言:之前有很多动作模仿或者表情模仿的工作,但是如果要在实际使用中进行电影级的复刻工作,仅仅表情或动作模仿还不够,需要表情和动作一起模仿。最近字节跳动提出了一个表情+动作模仿视频生成DreamActor-M1。 目录 贡献概述 核心动…...
多模态学习分析(MLA)驱动高中差异化教学策略研究
一、引言 1.1 研究背景 在当今时代,教育数字化转型的浪潮正席卷全球,深刻地改变着教育的面貌。这一转型不仅是技术的革新,更是教育理念、教学模式和教育管理的全面变革。随着互联网、大数据、人工智能等现代信息技术在教育领域的广泛应用&a…...
为什么ASCII的A是65[特殊字符]
为什么ASCII的A是65 1. ASCII是怎么来的 ASCII是1960年代美国标准协会制定的,目的是统一计算机字符编码。它们要在**7个比特位(0-127)**里,塞下所有英文字符,数字,标点和控制符。 2. 为什么A是65&#x…...
Python正则表达式实战技巧:如何高效处理文本匹配?
当你需要在Python中处理文本数据时,正则表达式绝对是你的瑞士军刀。无论是数据清洗、日志分析还是表单验证,掌握正则表达式都能让你事半功倍。今天我们就来聊聊Python中re模块的那些实用技巧和常见陷阱。 为什么正则表达式如此重要? 想象一…...
驱动学习专栏--写在前面
此专栏基于正点原子的文档【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.81 开发板为luckfox的rv1106开发板,之前参加过一个CM1相机的开源项目,与其吃灰不如作为一个学习的工具来发挥余热 所以文档中的一些东西需要对应的在rv1106平台上做修改ÿ…...
Java中的Map vs Python字典:核心对比与使用指南
一、核心概念 1. 基本定义 Python字典(dict) :动态类型键值对集合,语法简洁,支持快速查找。Java Map:接口,常用实现类如 HashMap、LinkedHashMap,需声明键值类型(泛型&…...
从零搭建微服务项目Pro(第0章——微服务项目脚手架搭建)
前言: 在本专栏Base第0章曾介绍一种入门级的微服务项目搭建,尽管后续基于此框架上实现了Nacos、Eureka服务注册发现、配置管理、Feign调用、网关模块、OSS文件存储、JSR参数校验、LogBack日志配置,鉴权模块、定时任务模块等,但由于…...
RAG创建向量数据库:docsearch = FAISS.from_texts(documents, embeddings)
RAG创建向量数据库:docsearch = FAISS.from_texts(documents, embeddings) 代码解释 docsearch = FAISS.from_texts(documents, embeddings) 这行代码主要作用是基于给定的文本集合创建一个向量数据库(这里使用 FAISS 作为向量数据库工具 )。具体说明如下: FAISS :FAISS …...
适配python3.9的 SORT算法
简单地更改了 sort.py 函数的接口,核心思想、处理操作并不改变。 源代码链接:https://github.com/abewley/sort import os import numpy as np import glob import time import argparse from filterpy.kalman import KalmanFilter from scipy.optimiz…...
记录Docker部署CosyVoice V2.0
#记录工作 CosyVoice 是由 FunAudioLLM 团队开发的一个开源多语言大规模语音生成模型,提供了从推理、训练到部署的全栈解决方案。 项目地址: https://github.com/FunAudioLLM/CosyVoice.git 该项目目前从v1.0版本迭代到v2.0版本,但是在Wind…...
源码编译 Galera、MySQL 5.7 Wsrep 和安装 MySQL 5.7 Galera集群
源码编译 Galera、MySQL 5.7 Wsrep 和安装 MySQL 5.7 Galera集群 说明1、源码编译 Galera1.1、安装依赖1.2、源码编译安装 openSSL1.2.1、下载源码1.2.2、编译安装 1.3、源码编译安装 Galera 31.3.1、下载源码1.3.2、注意1.3.3、编译安装 2、源码编译 MySQL-Wsrep2.1、安装依赖…...
【SLAM】ubuntu 18.04 下 OpenCV 3.2.0 的 opencv_example 运行闪退
本文首发于❄慕雪的寒舍 ubuntu 18.04 下 OpenCV 3.2.0 的 opencv_example 运行闪退问题探究。 1. 问题说明 在之前的ORB-SLAM3项目于ROS运行的博客中,提到过安装ROS时会自己安装一个OpenCV 3.2.0版本,所以最好不要安装其他版本的OpenCV,避…...
Linux网络编程——数据链路层详解,以太网、MAC地址、MTU、ARP、DNS、NAT、代理服务器......
目录 一、前言 二、以太网 二、以太网帧格式 三、 MAC地址 四、MTU 1、数据链路层的数据分片 2、MTU对UDP协议的影响 3、MTU对TCP协议的影响 五、ARP协议 1、什么是ARP 2、ARP的作用 3、ARP协议的工作流程 4、ARP缓存表 5、ARP请求报文 6、中间人 六、DNS&…...
Android7 Input(四)InputReader
概述 本文主要描述了Android Input框架中的InputReader的功能,InputReader模块的功能,总结成一句话就是InputReader获取输入设备的事件并将事件进行加工处理,然后传递给QueuedInputListener,最终QueuedInputListener将事件传递给…...
游戏报错?MFC140.dll怎么安装才能解决问题?提供多种MFC140.dll丢失修复方案
MFC140.dll 是 Microsoft Visual C 2015 运行库的重要组成部分,许多软件和游戏依赖它才能正常运行。如果你的电脑提示 "MFC140.dll 丢失" 或 "MFC140.dll 未找到",说明系统缺少该文件,导致程序无法启动。本文将详细介绍 …...
寻找最大美丽数
# 输入:nums1 [4,2,1,5,3], nums2 [10,20,30,40,50], k 2 # 输出:[80,30,0,80,50] import random class Solution:def findMaxSum(self, nums1, nums2, k):hash_table []sum1 0data []print(**31,\n,\t数据)for key,values in enumerate(nums1):da…...
[Linux]进程地址空间
前言 我们在学习C语言期间,经常可以提及到这些区域,有一个问题:这里的地址空间是内存吗?答案是这里的地址空间并不是内存。这里的地址空间是进程地址空间,下面我们就讲解进程地址空间。 这段空间中自下而上ÿ…...
dfs和bfs算法
DFS(深度优先搜索,Depth-First Search)和 BFS(广度优先搜索,Breadth-First Search)是图遍历或搜索算法中的两种基本方法。它们在探索图的节点时采用不同的策略,适用于不同的场景。 ### 深度优先…...
跨站请求是什么?
介绍 跨站请求(Cross-Site Request)通常是指浏览器在访问一个网站时,向另一个域名的网站发送请求的行为。这个概念在 Web 安全中非常重要,尤其是在涉及到“跨站请求伪造(CSRF)”和“跨域资源共享ÿ…...
【深度学习与大模型基础】第9章-条件概率以及条件概率的链式法则
简单理解条件概率 条件概率就是在已知某件事发生的情况下,另一件事发生的概率。用数学符号表示就是: P(A|B) 在B发生的前提下,A发生的概率。 计算机例子:垃圾邮件过滤 假设你写了一个程序来自动判断邮件是否是垃圾邮件…...
C++: 获取auto的实际类型
auto a "hello";auto* b "hello";auto& c "hello";上述 a, b, c 类型分别是什么? 在不使用 IDE 提供的 inlay hints 情况下, 可以编译期获取,然后运行时打印出来: 方法: 用 decltype(var)…...
谷歌开源代理开发工具包(Agent Development Kit,ADK):让多智能体应用的构建变得更简
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…...
揭开人工智能与机器学习的神秘面纱:开发者的视角
李升伟 编译 人工智能(AI)和机器学习(ML)早已不再是空洞的流行语——它们正在彻底改变我们构建软件、做出决策以及与技术互动的方式。无论是自动化重复性任务,还是驱动自动驾驶汽车,AI/ML都是现代创新的核…...
35.Java线程池(线程池概述、线程池的架构、线程池的种类与创建、线程池的底层原理、线程池的工作流程、线程池的拒绝策略、自定义线程池)
一、线程池概述 1、线程池的优势 线程池是一种线程使用模式,线程过多会带来调度开销,进而影响缓存局部性和整体性能,而线程池维护着多个线程,等待着监督管理者分配可并发执行的任务,这避免了在处理短时间任务时创建与…...
【NumPy科学计算:高性能数组操作核心指南】
目录 前言:技术背景与价值当前技术痛点解决方案概述目标读者说明 一、技术原理剖析核心概念图解关键技术模块技术选型对比 二、实战演示环境配置要求核心代码实现运行结果验证 三、性能对比测试方法论量化数据对比结果分析 四、最佳实践推荐方案 ✅常见错误 ❌调试技…...
软考 系统架构设计师系列知识点之杂项集萃(50)
接前一篇文章:软考 系统架构设计师系列知识点之杂项集萃(49) 第78题 著作权中,()的保护期不受限制。 A. 发表权 B. 发行权 C. 署名权 D. 展览权 正确答案:C。 所属知识点:旧版…...
实现定长的内存池
池化技术 所谓的池化技术,就是程序预先向系统申请过量的资源,然后自己管理起来,以备不时之需。这个操作的价值就是,如果申请与释放资源的开销较大,提前申请资源并在使用后并不释放而是重复利用,能够提高程序…...
定制一款国密浏览器(7):铜锁和BoringSSL
上一章简单介绍了一下国密算法,本章开始进入实战,进行国密算法的移植。算法的移植以铜锁为蓝本,移植到 BoringSSL 中。 BoringSSL 也是由 OpenSSL fork 而来,那能否修改 Chromium 的源码,使用铜锁库呢?这种方式我也考虑并尝试过,最后发现两者的接口差别太大,Chromium …...
Docker 安装CRMEB陀螺匠教程
首先下载代码到服务器中,打开终端,并切换到项目源码根目录: 通过 Docker compose 启动项目 第一次启动时需要拉取和打包相关镜像,所需时长视网络情况而定,需耐心等待。 配置反向代理 参考 Nginx 配置 Nginx 反向代…...
Java中的static都能用来修饰什么?
在Java编程语言中,static关键字是非常重要的修饰符,可以用于多种不同的地方。可用来修饰变量、方法、代码块以及类。 1.静态变量 定义:静态变量属于类本身,而不是类的任何特定实例(new出来的对象)。 特点&a…...