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

CSS基础面试题

news 文章来源：https://blog.csdn.net/Bruce__taotao/article/details/135019471 2025/5/3 19:05:56

介绍一下标准css盒子模型与低版本IE的盒子模型？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin

低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
box-sizing 属性可以被用来调整这些表现:

  • content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

border-box不包含margin

切换下box-sizing，动手实践下

https://codepen.io/bruce_taotao/pen/ExoGMZP

image.png

BFC是什么？

BFC - Block Formatting Context块级格式化上下文。

每一个BFC区域只包含其子元素，不包括其孙子元素。

每一个BFC区域都是独立隔离的，互不影响的。（也就是说创建2个垂直方向的BFC-margin就不会重叠，解决margin的塌陷问题）

触发BFC条件：

  • 根元素（<html>）
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display 为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
  • overflow 计算值(Computed)不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content 或 paint 的元素
  • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
  • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 ``column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

1.2margin的塌陷问题

  • 同个BFC垂直方向的 margin会重叠 (取两者的大值)

  • 当父子关系的盒子，给子元素添加margin-top，有可能会把父元素一起带跑。

  • 当浮动产生影响的时候，可以利用BFC来清除浮动的影响
    https://codepen.io/bruce_taotao/full/NWXedre

  • BFC可以阻止标准流元素被浮动元素覆盖

浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。
若从左向右的匹配，发现不符合规则（例如 子元素设置position:absolute;需要知道上级元素那个为position:relative;），需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

3 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport


<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>

手写-单行文本省略,多行文本省略 css实现.

注意: 用webkit-line-clamp ,
display: -webkit-box;和-webkit-box-orient: vertical/horizontal 是必须的.

.single-line-text{width:200px;over-flow:hidden;white-space:nowrap;text-overflow:ellipsis
}
.mtl-line-text{width:200px;over-flow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2; display: -webkit-box;-webkit-box-orient:: vertical;
}

适配pc,ipad,app 端不同布局

rem/em/vh/vw/vm 的区别

em和rem的主要区别是：浏览器根据谁来转化成px。

  • rem

  • 这个单位代表根元素（通常为<html> 元素）的 font-size 大小。当用在根元素的 font-size 上面时 ，它代表了它的初始值。
    当使用rem的时候，他们转化为像素的大小取决于页根元素的字体大小，即html元素的字体大小。

例如：根元素的字体大小为16px，10rem将等于160px，即10*16=160。

  • em

  • 相对长度单位，这个单位表示元素的 font-size 的计算值。如果用在font-size 属性本身，它则表示元素继承的 font-size 值。

当使用em的时候，em转为像素的大小取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小影响，除非显式重写与一个具体单位。

例如，父级元素字体大小为13px,10em将等同于130px,即13x10 = 130px

  • vh

  • 视口的初始包含块的高度的 1%。

  • vw

  • 视口的初始包含块的宽度的 1%。
    原文链接：
    https://blog.csdn.net/weixin_39808181/article/details/114102702,
    https://juejin.cn/post/6945618076087894052,
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

参考：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

https://www.itcast.cn/news/20201016/16152387135.shtml

https://segmentfault.com/a/1190000013325778

相关文章：

CSS基础面试题

介绍一下标准css盒子模型与低版本IE的盒子模型&#xff1f; 标准盒子模型&#xff1a;宽度内容的宽度&#xff08;content&#xff09; border padding margin 低版本IE盒子模型&#xff1a;宽度内容宽度&#xff08;contentborderpadding&#xff09; margin box-sizing 属性…...

编程日记 2023/12/19 10:30:06

L1-028 判断素数

本题的目标很简单&#xff0c;就是判断一个给定的正整数是否素数。 输入格式&#xff1a; 输入在第一行给出一个正整数N&#xff08;≤ 10&#xff09;&#xff0c;随后N行&#xff0c;每行给出一个小于231的需要判断的正整数。 输出格式&#xff1a; 对每个需要判断的正整数&a…...

编程日记 2023/12/19 10:24:01

Scala多线程爬虫程序的数据可视化与分析实践

一、Scala简介 Scala是一种多种类型的编程语言&#xff0c;结合了针对对象编程和函数式编程的功能。它运行在Java虚拟机上&#xff0c;具有强大的运算能力和丰富的库支持。Scala常用于大数据处理、并发编程和Web应用程序开发。其灵活性和高效性编程成为编写多线程爬虫程序的理…...

编程日记 2023/12/19 10:18:56

YOLOv8加入顶会ICLR2022MobileViT模块

一、原文引入介绍 MOBILEVIT：轻量级、通用型且移动友好的视觉Transformer 论文地址：https://arxiv.org/pdf/2110.02178.pdf MOBILEVIT: LIGHT-WEIGHT, GENERAL-PURPOSE,AND MOBILE-FRIENDLY VISION TRANSFORMER MobileViT是由苹果公司发表在ICLR2022顶会上的一篇文章，这篇文…...

编程日记 2023/12/19 10:14:53

「数据结构」二叉树1

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;C启航 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 文章目录 &#x1f349;树&#x1f349;二叉树&#x1f34c;特殊二叉树&#x1f34c;二叉树的性质&#x1f34c;存储结构 &#x1f349;…...

编程日记 2023/12/19 10:13:52

栈（C语言版）

一.栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。 栈中的数据元素遵守 后进先出 LIFO &#xff08; Last In First Out &#xff09;的原则。…...

编程日记 2023/12/19 10:10:49

聊聊reactor-logback的AsyncAppender

序 本文主要研究一下reactor-logback的AsyncAppender AsyncAppender reactor-logback/src/main/java/reactor/logback/AsyncAppender.java public class AsyncAppender extends ContextAwareBaseimplements Appender<ILoggingEvent>, AppenderAttachable<ILogging…...

编程日记 2023/12/19 10:09:48

Apache SeaTunne简介

Apache SeaTunne简介 文章目录 1.Apache SeaTunne是什么&#xff1f;1.1[官网](https://seatunnel.apache.org/)1.2 项目地址 2.架构3.特性3.1 丰富且可扩展的连接器和插件机制3.2 支持分布式快照算法以确保数据一致性3.3 支持流、批数据处理&#xff0c;支持全量、增量和实时数…...

编程日记 2023/12/19 10:06:45

【开题报告】基于uniapp的IT资讯阅读小程序的设计与实现

1.研究背景 随着信息技术的飞速发展和互联网的普及&#xff0c;IT&#xff08;Information Technology&#xff09;行业成为了当今社会中最活跃和最具前景的领域之一。人们对于IT领域的资讯需求越来越高&#xff0c;希望能够第一时间获取到全面、准确、及时的IT资讯。 传统的…...

编程日记 2023/12/19 10:04:43

Java小案例-SpringBoot火车票订票购票票务系统

目录 前言 详细资料 源码获取 前言 SpringBoot火车票订票购票票务系统 前端使用技术&#xff1a;HTML5,CSS3、JavaScript、VUE等 后端使用技术&#xff1a;Spring boot&#xff08;SSM&#xff09;等 数据库&#xff1a;Mysql数据库 数据库管理工具&#xff1a;phpstud…...

编程日记 2023/12/19 10:03:42

关于获取高级电工职业技能等级证书一些避坑经历

有幸在今年9月份成功通过高级电工职业技能等级认证,以下是我遇到的一些常见问题,以及一些考点内容以及总结 什么是高级电工职业技能等级证书 电工职业技能等级证书是证明持证人电工知识和技能水平高低的&#xff0c;是持证人应聘、求职、任职、开业的资格凭证&#xff0c;是用…...

编程日记 2023/12/19 9:57:36

springboot(ssm在线课程管理系统 网课管理系统Java系统

springboot(ssm在线课程管理系统 网课管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 数…...

编程日记 2023/12/19 9:55:33

4.1 媒资管理模块 - Nacos与Gateway搭建

文章目录 媒资管理模块 - 媒资项目搭建一、需求分析1.1 介绍1.2 数据模型1.3 分析网关 二、 搭建Nacos2.1 服务发现中心2.2.1 Maven2.2.2 配置Nacos 2.2 配置中心2.2.1 介绍2.2.2 Maven 坐标2.2.3 配置 content-api 工程2.2.4 配置 content-service 工程2.2.5 配置 system-api …...

编程日记 2023/12/19 9:54:32

1641：【例 1】矩阵 A×B

【题目描述】 矩阵 A 规模为 nm &#xff0c;矩阵 B 规模为 mp &#xff0c;现需要你求 AB 。 矩阵相乘的定义&#xff1a;nm 的矩阵与 mp 的矩阵相乘变成 np 的矩阵&#xff0c;令 aik 为矩阵 A 中的元素&#xff0c;bkj 为矩阵 B 中的元素&#xff0c;则相乘所得矩阵 C 中的…...

编程日记 2023/12/19 9:53:31

iOS问题记录 - iOS 17通过NSUserDefaults设置UserAgent无效

文章目录 前言开发环境问题描述问题分析解决方案最后 前言 最近维护一个老项目时遇到的问题。说起这老项目我就有点头疼&#xff0c;一个快十年前的项目&#xff0c;这么说你可能不觉得有什么&#xff0c;但是你想想Swift也才发布不到十年&#xff08;2014年6月发布&#xff0…...

编程日记 2023/12/19 9:52:31

linux的一些典型面试题解读

目录 前言1 Linux 文件系统2 Shell 编程3 进程管理4 用户和权限管理5 软件包管理6 网络配置7 系统监控和日志8 存储管理9 安全性10 常见命令11 系统启动流程12 Linux 进程间通信方式13 Linux 中的 I/O 多路复用14 Shell 脚本优化与调试15 Linux 文件权限与 ACL16 Linux 中的环境…...

编程日记 2023/12/19 9:50:28

tortoisesvn各版本下载链接

https://tortoisesvn.net 无法访问最新版本下载 TortoiseSVN download | SourceForge.net 所有版本下载 TortoiseSVN - Browse Files at SourceForge.net...

编程日记 2023/12/19 9:44:23

[自动化运维工具]ansible简单介绍和常用模块

ansible 源操作主机功能 自动化运维&#xff08;playbook剧本yaml&#xff09; 是基于python开发的一个配置管理和应用部署工具&#xff0c;在自动化运维中&#xff0c;现在还是异军突起 ansible能批量配置&#xff0c;部署&#xff0c;管理上千台主机&#xff0c;类似于xshell…...

编程日记 2023/12/19 9:40:19

记一次渗透测试信息收集-越权

目录 一、信息收集 子域名收集 存活探测 二、越权 越权一 越权二 一、信息收集 子域名收集 使用subfinder进行子域名收集 语法&#xff1a;subfinder.exe -d xx.com -all -o qq1.txt -v //结合自己渗透经验&#xff0c;多渠道收集子域名&#xff0c;汇总去重。 …...

编程日记 2023/12/19 9:38:17

Flink系列之：Table API Connectors之JSON Format

Flink系列之&#xff1a;Table API Connectors之JSON Format 一、JSON Format二、依赖三、创建一张基于 JSON Format 的表四、Format 参数五、数据类型映射关系 一、JSON Format JSON Format 能读写 JSON 格式的数据。当前&#xff0c;JSON schema 是从 table schema 中自动推…...

编程日记 2023/12/19 9:32:11

2018年第七届数学建模国际赛小美赛B题世界杯足球赛的赛制安排解题全过程文档及程序

2018年第七届数学建模国际赛小美赛 B题 世界杯足球赛的赛制安排 原题再现&#xff1a; 有32支球队参加国际足联世界杯决赛阶段的比赛。但从2026年开始&#xff0c;球队的数量将增加到48支。由于时间有限&#xff0c;一支球队不能打太多比赛。因此&#xff0c;国际足联提议改变…...

编程日记 2023/12/19 9:31:10

【为数据之道学习笔记】5-7五类数据主题联接的应用场景

在数字化转型的背景下&#xff0c;华为的数据消费已经不再局限于传统的报表分析&#xff0c;还要支持用户的自助分析、实时分析&#xff0c;通过数据的关联&#xff0c;支持业务的关联影响分析以及对目标对象做特征识别&#xff0c;进行特定业务范围圈定、差异化管理与决策等。…...

编程日记 2023/12/19 9:29:08

得帆信息创始人-张桐，受邀出席 BV百度风投AIGC主题论坛

近日&#xff0c;得帆信息创始人兼CEO张桐&#xff0c;作为百度风投被投代表企业创始人受邀出席“向未来&#xff0c;共成长” BV百度风投AIGC主题论坛。 与包括上海市徐汇区相关部门领导、百度集团相关事业部负责人及代表&#xff0c;以及来自国寿资本、中网投、麦顿投资的投资…...

编程日记 2023/12/19 9:26:05

云原生之深入解析减少Docker镜像大小的优化技巧

一、什么是 Docker&#xff1f; Docker 是一种容器引擎&#xff0c;可以在容器内运行一段代码&#xff0c;Docker 镜像是在任何地方运行应用程序而无需担心应用程序依赖性的方式。要构建镜像&#xff0c;docker 使用一个名为 Dockerfile 的文件&#xff0c;Dockerfile 是一个包…...

编程日记 2023/12/19 9:25:04

记一次java for循环改造多线程的操作

背景 今天在开发质量平台时需要获取某些数据&#xff0c;要请求公司某个工程的OpenAPI接口A。此接口为返回通用数据的接口&#xff0c;且接口本身的RT都在2&#xff5e;3秒之间。使用该接口&#xff0c;需要进行两次循环获取&#xff0c;然后对返回数据进行处理组装&#xff0…...

编程日记 2023/12/19 9:24:03

Java面试整理-Java复制

Java复制 在Java中，复制对象或数据通常涉及不同的场景和方法。以下是几种常见的复制情况及其相关方法： 基本数据类型的复制：基本数据类型（如int, double, char等）在Java中是通过值传递的。当你将一个基本数据类型的值赋给另一个变量时，实际上是创建了一个新的值。 int a …...

编程日记 2023/12/19 9:22:01

wsl kafka的简单应用

安装并配置单机版kafka所需环境 wsl2 环境可用性较高&#xff0c;如下介绍在该环境中安装单机版本kafka的详细过程。 启动命令行工具启动wsl&#xff1a;wsl --user root --cd ~&#xff0c;&#xff08;以root用户启动&#xff0c;进入wsl后当前路径为~“用户主目录”&#…...

编程日记 2023/12/19 9:15:55

2023年国赛高教杯数学建模D题圈养湖羊的空间利用率解题全过程文档及程序

2023年国赛高教杯数学建模 D题 圈养湖羊的空间利用率 原题再现 规模化的圈养养殖场通常根据牲畜的性别和生长阶段分群饲养&#xff0c;适应不同种类、不同阶段的牲畜对空间的不同要求&#xff0c;以保障牲畜安全和健康&#xff1b;与此同时&#xff0c;也要尽量减少空间闲置所…...

编程日记 2023/12/19 9:13:53

Flink系列之：Table API Connectors之Raw Format

Flink系列之&#xff1a;Table API Connectors之Raw Format 一、Raw Format二、示例三、Format 参数四、数据类型映射 一、Raw Format Raw format 允许读写原始&#xff08;基于字节&#xff09;值作为单个列。注意: 这种格式将 null 值编码成 byte[] 类型的 null。这样在 ups…...

编程日记 2023/12/19 9:10:50

社交网络分析3：社交网络隐私攻击、保护的基本概念和方法 + 去匿名化技术 + 推理攻击技术 + k-匿名 + 基于聚类的隐私保护算法

社交网络分析3&#xff1a;社交网络隐私攻击、保护的基本概念和方法 去匿名化技术 推理攻击技术 k-匿名 基于聚类的隐私保护算法 写在最前面社交网络隐私泄露用户数据暴露的途径复杂行为的隐私风险技术发展带来的隐私挑战经济利益与数据售卖防范措施 社交网络 用户数据隐私…...

编程日记 2023/12/19 9:07:47