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

CSS常见面试题

news 2025/7/15 4:13:12

🎯CSS常见面试题

      • 1.CSS的盒模型
      • 2.CSS选择器的优先级
      • 3.隐藏元素的方法有哪些？
      • 4.px和rem的区别是什么？
      • 5.重绘排版有什么区别？
      • 6.让一个元素水平垂直居中的方式有哪些？
      • 7.CSS的哪些属性可以继承？哪些不可以继承？
      • 8.有没有用过预处理器？

😊各位小伙伴们，本专栏新文章出炉了！！！


1.CSS的盒模型

在HTML页面中所有元素都可以看成是一个盒子。

盒子的组成：内容（content）、边框（border）、内边距（padding）、外边距（margin）

  • 盒模型的类型：
    • 标准盒模型
      • margin + border + padding + content
    • IE盒模型
      • margin + content（border+padding）

控制盒模型的模式：box-sizing:content-box（默认值，标准盒模型）border-box（IE盒模型）

标准盒模型和IE盒模型的区别

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Test</title><style>/* 清除样式 */*{margin: 0;padding: 0;}.box{padding: 20px;margin: 0 auto;border: 5px solid;background-color: aqua;width: 200px;height: 200px;box-sizing: content-box;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

此时我们发现，虽然我们定义的盒子高宽都为200px，但实际盒子大小是250px*250px

也就是说，标准盒模型整个盒子的实际大小是由各部分叠加的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Test</title><style>/* 清除样式 */*{margin: 0;padding: 0;}.box{padding: 20px;margin: 0 auto;border: 5px solid;background-color: aqua;width: 200px;height: 200px;/* 切换盒模型 */box-sizing: border-box;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

在IE盒模型下，整个盒子的大小分为margin和content两部分，通俗来说padding，border和content算作一个整体，我们定义的盒子高宽为200px，也就是说content + border + padding的实际大小就为200px*200px

2.CSS选择器的优先级

CSS的三大特性：

  • 层叠性：指多个样式定义适用于同一个元素时，冲突的样式会根据一系列规则来决定哪个样式将生效。
  • 继承性：指某些CSS属性可以由父级元素传递给子级元素，但并不是所有属性都可以继承。
  • 优先级

优先级：

  • 内联样式 > !important > ID选择器 > 类选择器 = 属性选择器（如<font style="color:rgb(44, 44, 54);">[type="text"]</font>） = 伪类 > 类型选择器（如<font style="color:rgb(44, 44, 54);">div</font>、<font style="color:rgb(44, 44, 54);">p</font>） = 伪元素（如<font style="color:rgb(44, 44, 54);">::before</font>、<font style="color:rgb(44, 44, 54);">::after</font>） > 通用选择器（如*）。

3.隐藏元素的方法有哪些？

  • display:none：视觉上隐藏元素，元素完全从文档流中移除，意味着该元素不会占据页面空间。
  • opacity:0：设置元素的透明度为0，视觉上隐藏，但实际上仍占据页面空间。
  • position:absolute / left:-9999px：通过定位的方式将元素移除屏幕实现隐藏，虽不影响页面布局，但会导致屏幕阅读器等辅助技术无法正确读取内容。
  • visibility:hidden：此属性会使元素不可见，但仍占据文档流中的空间。

4.px和rem的区别是什么？

  • px：是一种固定长度，表示屏幕上的物理像素。
  • rem：相对单位，相对于HTML根节点font-size的值，假设设置HTML根节点的font-size:62.5%，那么1rem = 10px

5.重绘排版有什么区别？

重绘（Repainting）：

  • 重绘是指当一个元素的外观发生变化时，例如颜色改变，背景色改变等，但其几何形状（位置、大小）没有发生变化，浏览器只会重新渲染这部分变化。

重排（Reflow）：

  • 重排是指当一个元素的几何形状发生变化时，例如尺寸（高、宽），位置等发生改变，或者DOM树结构发生变化时，浏览器需要重新计算布局，确定每个元素的大小和位置。

值得注意的是：触发重排一定会触发重绘，但触发重绘不一定会触发重排，如果盒模型的高宽确定，就不会触发重排

6.让一个元素水平垂直居中的方式有哪些？

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */
}

.container {display: grid;place-items: center; /* 水平垂直居中 */
}

.parent {position: relative;
}
.child {position: absolute;top: 50%;left: 50%;/* 纠正元素自身尺寸带来的偏移。 */transform: translate(-50%, -50%);
}

.center {margin-left: auto;margin-right: auto;margin-top: auto;margin-bottom: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

7.CSS的哪些属性可以继承？哪些不可以继承？

可继承属性：

  • 颜色相关属性、字体相关属性、文本相关属性、列表相关属性、表格相关属性等

不可继承属性：

  • 边框相关属性、背景相关属性、边距相关属性、填充相关属性、尺寸相关属性、定位相关属性、显示模式相关属性等

8.有没有用过预处理器？

预处理器语言增加了变量、函数、混入、嵌套等强大功能。

SCSS（Sassy Css）

SCSS是Sass的最新语法，它是一个成熟的CSS扩展语言。SCSS兼容标准的CSS语法，并在此基础上增加了一些功能。

  • 变量（$variable）：可以用来存储颜色、数字、字符串或布尔值。
  • 嵌套选择器（h1{.title{....}}）：可以更清晰地表示DOM结构中的关系。
  • 混合（Mixins）（@mixin）：允许创建可重用的选择器定义。
  • 继承选择器（@extend）：可以让一个选择器继承另一个选择器的样式。
  • 函数（function）：可以执行计算，如数学运算等。

LESS

LESS是另一种CSS预处理器，它同样提供了扩展CSS语言的功能，以简化样式表的编写和维护。

  • 变量（$variable）：与SCSS类似，可以用来存储值。
  • 嵌套规则：支持类似SCSS的嵌套方式。
  • 混合（Mixins）（.mixin()）：也可以包含一组属性，并可以在文档中多次使用。
  • 操作符：支持数学运算符用于动态计算样式
  • 函数：提供了一些内置函数，也可以自定义函数。

SCSS使用类似CSS的语法，而传统的Sass使用一种不同的语法风格（缩进式），两者都需要通过编译工具转换为浏览器能够理解的标准CSS。


🎨觉得不错的话记得点赞收藏呀！！🎨

😀别忘了给我关注~~😀

相关文章：

CSS常见面试题

&#x1f3af;CSS常见面试题 1.CSS的盒模型2.CSS选择器的优先级3.隐藏元素的方法有哪些&#xff1f;4.px和rem的区别是什么&#xff1f;5.重绘排版有什么区别&#xff1f;6.让一个元素水平垂直居中的方式有哪些&#xff1f;7.CSS的哪些属性可以继承&#xff1f;哪些不可以继承&…...

编程日记 2024/10/24 9:26:44

ChatGPT实现旅游推荐微信小程序

随着旅游行业的快速发展&#xff0c;个性化推荐已成为提升用户体验的重要手段。通过AI技术&#xff0c;提供一个智能旅游推荐小程序&#xff0c;使用户能够轻松获取定制化的旅行建议。 项目概述 项目目标 开发一个AI旅游推荐小程序&#xff0c;基于用户输入的旅行偏好&#…...

编程日记 2024/10/24 9:23:40

基于单片机的智能小区门禁系统设计（论文+源码）

1总体架构 智能小区门禁系统以STM32单片机和WiFi技术为核心&#xff0c;STM32单片机作为主控单元&#xff0c;通过WiFi模块实现与手机APP的连接&#xff0c;构建整个门禁系统。系统硬件包括RFID模块、指纹识别模块、显示屏、按键以及继电器。通过RFID绑定IC卡、APP面部识别、指…...

编程日记 2024/10/24 9:22:39

stm32F103 实现呼吸灯效果

目录 硬件连接 软件实现步骤 初始化系统时钟。 配置 GPIO 引脚。 配置定时器以生成 PWM 信号。 在主循环中调整 PWM 占空比以实现呼吸效果。 示例代码 1. 初始化系统时钟 2. 配置 GPIO 引脚 3. 配置定时器以生成 PWM 信号 4. 在主循环中调整 PWM 占空比以实现呼吸效…...

编程日记 2024/10/24 9:20:37

SAP 为 Copilot Joule 增添协作功能

在最新的SAP TechEd大会上&#xff0c;SAP发布了一系列创新功能&#xff0c;旨在扩展其AI平台Joule的能力&#xff0c;同时推出了其他工具&#xff0c;以提高企业效率并为开发人员提供更多支持。这些创新不仅将推动AI驱动的业务转型&#xff0c;还将加强数据的利用和简化开发流…...

编程日记 2024/10/24 9:19:36

Node.js 模块化

1. 介绍 1.1 什么是模块化与模块 ? 将一个复杂的程序文件依据一定规则&#xff08;规范&#xff09;拆分成多个文件的过程称之为 模块化其中拆分出的 每个文件就是一个模块 &#xff0c;模块的内部数据是私有的&#xff0c;不过模块可以暴露内部数据以便其他模块使用 1.2 什…...

编程日记 2024/10/24 9:18:35

【部署篇】RabbitMq-03集群模式部署

一、准备主机 准备3台主机用于rabbitmq部署&#xff0c;文章中是在centos7上安装部署rabbitmq3.8通过文章中介绍的方式可以同样在centos8、centos9上部署&#xff0c;只需下载对应的版本进行相同的操作。 主机IP角色说明192.168.128.31种子节点192.168.128.32普通节点192.16…...

编程日记 2024/10/24 9:17:33

【硬啃Dash-Fastapi-Admin】03-requirements-pg.txt 速览

文章目录 dash2.18.1 纯Python的Web应用框架Python Dash库的功能介绍和用法示例功能介绍用法示例 Flask-Compress1.15 Flask响应数据的压缩功能介绍用法示例注意事项 feffery-antd-charts0.1.0rc5 数据可视化组件库功能介绍用法示例 feffery-antd-components0.3.8 Dash 第三方组…...

编程日记 2024/10/24 9:14:29

【CS常见问题】你用的是VS2019,最高支持.NET5.0,但是项目将.NET6.0设为目标无法运行,怎么办?

.NET版本问题 报错示例报错分析最简单的方法步骤 报错示例 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 NETSDK1045 当前 .NET SDK 不支持将 .NET 6.0 设置为目标。请将 .NET 5.0 或更低版本设置为目标&#xff0c;或使用支持 .NET 6.0 的 .NET SDK 版本。 ABFview C:\x…...

编程日记 2024/10/24 9:10:24

系统登录接口文档Demo

接口描述 该接口用于用户登录验证。通过用户名和密码进行身份验证&#xff0c;成功后返回一个用于后续请求的认证 token。这个 token 是访问受保护资源的凭证。 时序图&#xff1a; 登录请求&#xff1a; 登录查询接口: POST {url}/api/user/login 请求体: {"username…...

编程日记 2024/10/24 9:09:21

gin入门教程（7）： 使用 Logrus + Lumberjack 创建日志中间件

结合 Logrus 和 Lumberjack&#xff0c;可以创建一个高效的日志中间件&#xff0c;用于记录请求和响应。以下是实现步骤&#xff1a; 1. 安装依赖 首先&#xff0c;确保安装了 Logrus 和 Lumberjack&#xff1a; go get github.com/sirupsen/logrus go get gopkg.in/natefin…...

编程日记 2024/10/24 9:08:20

kube-prometheus-stack 自定义 alertmanager 配置推送webhook

创建AlertmanagerConfig资源 在没有使用 prometheus-operator 的情况下&#xff0c;需要手动配置 alertmanager.yaml 来路由&发送从 prometheus 接收的警报。 使用 prometheus-operator 之后&#xff0c;事情变得简单一些。只需要创建 AlertmanagerConfig 资源&#xff0…...

编程日记 2024/10/24 9:07:18

openssl签名报错

在调用RSA_private_encrypt函数时遇到如下报错。 0:error:0D07803A:asn1 encoding routines:asn1_item_embed_d2i:nested asn1 error:crypto/asn1/tasn_dec.c:309:TypeX509 0:error:2406C06E:random number generator:RAND_DRBG_instantiate:error retrieving entropy:crypto/…...

编程日记 2024/10/24 9:06:16

如何在不使用 VPN 的情况下通过 SOCKS 隧道安全地路由 Web 流量

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 介绍 在某些情况下&#xff0c;您可能会发现自己处于一个不安全的网络或者有一个过于严格的防火墙&#xff0c;您会希望确保没有人在监…...

编程日记 2024/10/24 9:04:14

android openGL ES详解——缓冲区VBO/VAO/EBO/FBO

目录 一、缓冲区对象概念 二、分类 三、顶点缓冲区对象VBO 1、概念 2、为什么使用VBO 3、如何使用VBO 生成缓冲区对象 绑定缓冲区对象 输入缓冲区数据 更新缓冲区中的数据 删除缓冲区 4、VBO应用 四、顶点数组对象VAO 1、概念 2、为什么使用VAO 3、如何使用VAO…...

编程日记 2024/10/24 9:02:12

计算机网络——传输层服务

传输层会给段加上目标ip和目标端口号 应用层去识别报文的开始和结束...

编程日记 2024/10/24 9:00:09

gin入门教程（8）：渲染与静态文件

目录结构 /hello-gin │ ├── cmd/ │ └── main.go ├── pkg/ │ └── shared_lib.go ├── internal/ │ └── internal_lib.go ├── api/ │ └── routes.go ├── config/ │ └── config.go ├── migrations/ │ └── migration.sql └…...

编程日记 2024/10/24 8:54:00

Fast Simulation of Mass-Spring Systems in Rust 论文阅读

参考资料&#xff1a; 文章目录 概述流程概述&#xff1a;1.前置知识1.1 运动方程&#xff08;牛顿第二定律&#xff09;1.2 二阶导数的离散化1.3 代入运动方程1.4 物理意义 2. 将隐式积分问题转化为一个优化问题2.1 要解的是隐式积分问题是&#xff1a;2.2 引入辅助变量d1. 左…...

编程日记 2024/10/24 8:52:56

javaWeb项目-ssm+vue志愿者招募网站功能说明介绍

本项目源码&#xff08;点击下方链接下载&#xff09;&#xff1a;java-ssmvue志愿者招募网站实现源码(项目源码-说明文档)资源-CSDN文库 项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff1a…...

编程日记 2024/10/24 8:50:54

Selenium + Titanium代理获取请求的接口数据

有一个采集数据的需求&#xff0c;分析了页面数据后发现列表有一个id&#xff0c;但是没有其他数据&#xff0c;打开详情并不是通过id&#xff0c;而是其他一个字段&#xff0c;这就说明通过selenium抓取页面数据还不行&#xff0c;还要接口返回的数据。这个时候就需要用到代理…...

编程日记 2024/10/24 8:48:50

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/6/17 5:29:50

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/7/12 19:27:56

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/7/13 14:54:12

渗透实战PortSwigger靶场：lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

编程新知 2025/7/12 7:43:35

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

编程新知 2025/7/13 22:59:15

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/7/6 5:23:51

pgsql：还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决

问题&#xff1a; pgsql数据库通过备份数据库文件进行还原时&#xff0c;如果表中有自增序列&#xff0c;还原后可能会出现重复的序列&#xff0c;此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”&#xff0c;…...

编程新知 2025/7/6 0:32:04

Java多线程实现之Runnable接口深度解析

Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...

编程新知 2025/7/6 0:45:56

鸿蒙Navigation路由导航-基本使用介绍

1. Navigation介绍 Navigation组件是路由导航的根视图容器&#xff0c;一般作为Page页面的根容器使用&#xff0c;其内部默认包含了标题栏、内容区和工具栏&#xff0c;其中内容区默认首页显示导航内容&#xff08;Navigation的子组件&#xff09;或非首页显示&#xff08;Nav…...

编程新知 2025/7/13 19:48:34

CVE-2023-25194源码分析与漏洞复现(Kafka JNDI注入)

漏洞概述 漏洞名称&#xff1a;Apache Kafka Connect JNDI注入导致的远程代码执行漏洞 CVE编号&#xff1a;CVE-2023-25194 CVSS评分&#xff1a;8.8 影响版本&#xff1a;Apache Kafka 2.3.0 - 3.3.2 修复版本&#xff1a;≥ 3.4.0 漏洞类型&#xff1a;反序列化导致的远程代…...

编程新知 2025/7/9 1:20:52