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

CSS常见面试题

news 文章来源：https://blog.csdn.net/weixin_53614367/article/details/143190994 2024/11/30 9:33:20

🎯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选择器 > 类选择器 = 属性选择器（如[type="text"]） = 伪类 > 类型选择器（如div、p） = 伪元素（如::before、::after） > 通用选择器（如*）。

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常见面试题

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

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

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

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

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

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

1总体架构智能小区门禁系统以STM32单片机和WiFi技术为核心，STM32单片机作为主控单元，通过WiFi模块实现与手机APP的连接，构建整个门禁系统。系统硬件包括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大会上，SAP发布了一系列创新功能，旨在扩展其AI平台Joule的能力，同时推出了其他工具，以提高企业效率并为开发人员提供更多支持。这些创新不仅将推动AI驱动的业务转型，还将加强数据的利用和简化开发流…...

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

Node.js 模块化

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

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

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

一、准备主机准备3台主机用于rabbitmq部署，文章中是在centos7上安装部署rabbitmq3.8通过文章中介绍的方式可以同样在centos8、centos9上部署，只需下载对应的版本进行相同的操作。主机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 或更低版本设置为目标，或使用支持 .NET 6.0 的 .NET SDK 版本。 ABFview C:\x…...

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

系统登录接口文档Demo

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

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

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

结合 Logrus 和 Lumberjack，可以创建一个高效的日志中间件，用于记录请求和响应。以下是实现步骤： 1. 安装依赖首先，确保安装了 Logrus 和 Lumberjack： 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 的情况下，需要手动配置 alertmanager.yaml 来路由&发送从 prometheus 接收的警报。使用 prometheus-operator 之后，事情变得简单一些。只需要创建 AlertmanagerConfig 资源&#xff0…...

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

在调用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 流量

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

编程日记 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 论文阅读

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

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

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

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

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

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

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

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

ELK Stack与Graylog：强大的日志分析和可视化工具

ELK Stack的使用方法 ELK Stack由Elasticsearch、Logstash和Kibana三个核心组件组成，它们协同工作，提供了从日志收集、解析、存储到可视化的完整解决方案。安装与配置Elasticsearch Elasticsearch是ELK Stack的存储和查询引擎，负责存储日…...

编程日记 2024/10/24 8:46:45

安全见闻（6）——开阔眼界，不做井底之蛙

内容预览 ≧∀≦ゞ安全见闻六：通讯协议安全问题剖析声明引言一、通讯协议的保密性问题二、通讯协议的完整性问题三、身份验证问题四、可用性问题五、通讯协议的实现问题六、协议设计缺陷七、移动通讯协议的安全问题八、物联网通讯协议的安全问题九、工业控制系统通…...

编程日记 2024/10/24 8:43:37

GRU神经网络理解

全文参考以下B站视频及《神经网络与深度学习》邱锡鹏，侧重对GPU模型的理解，初学者入门自用记录，有问题请指正【重温经典】GRU循环神经网络 —— LSTM的轻量级版本，大白话讲解_哔哩哔哩_bilibili 更新门、重置门、学习与输出注&a…...

编程日记 2024/10/24 8:41:34

Windows 10、Office 2016/2019 和 PPTP 和 L2TP协议即将退役，企业应尽早做好准备

关心微软技术和产品的朋友一定对这个网站很熟悉：https://microsoftgraveyard.com/，这里静静的躺着很多微软技术和产品。近日，微软又在准备一场新的“告别仪式”了，这次是 Windows 10、Office 2016/2019 和一些老旧的协议与技术。让…...

编程日记 2024/10/24 8:39:32

论文阅读：Guided Linear Upsampling

今天介绍一篇有趣的文章，Guided Linear Upsampling，基于引导的线性上采样，这是发表在 ACM transaction on Graphic 的一篇工作。 Abstract 引导上采样是加速高分辨率图像处理的一种有效方法。在本文中，文章作者提出了一种简单而…...

编程日记 2024/10/24 8:36:29

深度图和RGB图对齐

坐标系间的转换_坐标系转换-CSDN博客深度图与彩色图的配准与对齐_彩色深度配准-CSDN博客 kinect 2.0 SDK学习笔记（四）--深度图与彩色图对齐_mapdepthframetocolorspace-CSDN博客相机标定（三）-相机成像模型_相机小孔成像模型…...

编程日记 2024/10/24 8:34:26

滑动窗口与TCP的缓冲区（buff）的关系

‌滑动窗口与TCP的缓冲区（buff）有直接关联。‌ 滑动窗口机制是TCP协议中用于流量控制和拥塞控制的重要机制。滑动窗口实际上是一个操作系统开辟的缓存空间，用于指定无需等待确认应答即可继续发送数据的最大值。这个窗口大小（win&…...

编程日记 2024/10/24 8:32:23

一款好用的搜索软件——everthing（搜索比文件资源管理器快）

everthing官网链接在官网选择下载 1.下载后双击打开 2.点击OK（需要其他语言自己选择） 3.选择安装位置（路径最好别带中文和空格） 继续点击下一步 4. 点击下一步 5.继续点击安装 6.然后就完成了 7.点击打开然后就可以搜索了...

编程日记 2024/10/24 8:31:18

C#WPF的App.xaml启动第一个窗体的3种方式

WPF的App.xaml启动第一个窗体的3种方式 1.使用App.xaml的StartupUri属性启动（推荐使用） 在App.xaml文件中，你可以设置StartupUri属性来指定启动时显示的第一个窗口： <Application x:Class"浅看一眼WPF.App"xmlns&…...

编程日记 2024/10/24 8:27:14

【JAVA毕设】基于JAVA的酒店管理系统

一、项目介绍本系统前端框架采用了比较流行的渐进式JavaScript框架Vue.js。使用Vue-Router实现动态路由，Ajax实现前后端通信，Element-plus组件库使页面快速成型。后端部分：采用SpringBoot作为开发框架，同时集成MyBatis、Redis、…...

编程日记 2024/10/24 8:26:13

网站添加子域名/游戏代理是怎么赚钱的如何代理游戏

properties属性文件工具类package xxx.business.utils; import org.apache.commons.configuration.ConfigurationException; import o ...Android再学习-20141022-Activity的生命周期20141022-Android再学习如何在一个应用程序当中定义多个Activity 定义一个类,继承Activity 在…...

编程日记 2024/11/30 5:48:01

建筑工地常用模板种类/黄山seo

java链接数据库打印输出中文显示乱码打印结果出现中文乱码，经过一番百度，原来是数据库也要指定编码格式...

编程日记 2024/11/30 2:50:26

做网站全套500元上海做网站公司/嘉兴网络推广

一、问题描述：bootstrap table中每行有一个input框，要对每个input进行检查数值是否在1~10之间（可保留小数点后一位）的数值，每次bind事件之前没有解绑事件，造成点击alert事件次数逐次递增，最后死…...

编程日记 2024/11/29 20:05:40

网上接网站开发不给钱怎么办/成都关键词seo推广电话

js封装的向某个元素后添加元素由于js没有现成的方法我们需要自己进行封装 //param newElement新创建的元素 //param targetElement传递的已知元素 function insertAfter ( newElement, targetElement ) {var parent targetElement.parentNode;if ( parent.lastChild targe…...

编程日记 2024/11/29 20:00:38

青岛商务学校网站建设/免费建站建站abc网站

你的系统应该是64bit的，在新建dsn要用64bit的odbc 运行 C:\Windows\SysWOW64\odbcad32.exe...

编程日记 2024/11/29 14:25:04

大淘客cms网站怎么做/最好用的搜索神器

c依次读取文件到指定字符例如件text.txt中有这么一段话:I,LOVE,YOU,BABY 如何一次一次读到指定的 ‘,’ 然后换行输出: I LOVE YOU BADY #include <fstream> #include <string> #include <iostream> using namespace std;int main() {char data[1…...

编程日记 2024/11/29 12:58:40