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

CSS常见面试题

news 2025/11/1 16:07:31

🎯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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/10/30 10:46:52

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/10/25 12:40:33

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/10/3 22:08:23

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/10/27 13:40:48

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/10/27 21:06:53

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/9/16 2:04:37