前端面试题(CSS篇三)

一、简单介绍使用图片 base64 编码的优点和缺点。

base64是一种图片处理格式,通过特定的算法将图片编码为一长串字符串,在页面显示的时候,可以使用该字符串来代替图片的url属性。

使用base64的优点:

        减少一个图片的http请求

使用base64的缺点:  

(1)根据base64的编码原理,编码后的大小会比原文件大小大1/3,如果把大图片编码到html/css中,不仅会造成文件体积的增加,影响文件的加载速度,还会增加浏览器对html或css文件解析渲染的时间。

(2)使用base64无法直接缓存,要缓存只能缓存包含base64的文件,比如HTML或者CSS,这相比域直接缓存图片的效果要差很多。

(3)兼容性的问题,ie8以前的浏览器不支持。

对于网站的小图标而言,可以使用base64图片来代替。

资料参考:

《玩转图片 base64 编码》icon-default.png?t=N7T8https://www.cnblogs.com/coco1s/p/4375774.html

《前端开发中,使用 base64 图片的弊端是什么?》icon-default.png?t=N7T8https://www.zhihu.com/question/31155574

《小 tip:base64:URL 背景图片与 web 页面性能优化》icon-default.png?t=N7T8https://www.zhangxinxu.com/wordpress/2012/04/base64-url-image-%E5%9B%BE%E7%89%87-%E9%A1%B5%E9%9D%A2%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/

二、'display'、'position'和'float'的相互关系?

(1)首先我们判断display属性是否为none,如果为none,则position和float属性的值不影响元素最后的表现。

(2)然后判断position的值是否为absolute或者fixed,如果是,则float属性失效,并且display的值应该被
设置为table或者block,具体转换需要看初始转换值。

(3)如果position的值不为absolute或者fixed,则判断float属性的值是否为none,如果不是,则display
的值则按上面的规则转换。注意,如果position的值为relative并且float属性的值存在,则relative相对
于浮动后的最终位置定位。

(4)如果float的值为none,则判断元素是否为根元素,如果是根元素则display属性按照上面的规则转换,如果不是,则保持指定的display属性值不变。

   总的来说,可以把它看作是一个类似优先级的机制,"position:absolute"和"position:fixed"优先级最高,有它存在
的时候,浮动不起作用,'display'的值也需要调整;其次,元素的'float'特性的值不是"none"的时候或者它是根元素的时候,调整'display'的值;最后,非根元素,并且非浮动元素,并且非绝对定位的元素,'display'特性值同设置值。

资料参考:

《position 跟 display、margincollapse、overflow、float 这些特性相互叠加后会怎么样?》icon-default.png?t=N7T8https://www.cnblogs.com/jackyWHJ/p/3756087.html

三、margin 重叠问题的理解。

相关知识点:

块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距,这样的现象称为“margin合并”。

产生折叠的必备条件:margin必须是邻接的!

而根据w3c规范,两个margin是邻接的必须满足以下条件:

•必须是处于常规文档流(非float和绝对定位)的块级盒子,并且处于同一个BFC当中。
•没有线盒,没有空隙,没有padding和border将他们分隔开
•都属于垂直方向上相邻的外边距,可以是下面任意一种情况
•元素的margin-top与其第一个常规文档流的子元素的margin-top
•元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
•height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
•高度为0并且最小高度也为0,不包含常规文档流的子元素,并且自身没有建立新的BFC的元素的margin-top和margin-bottom


margin合并的3种场景:

(1)相邻兄弟元素margin合并。

解决办法:
•设置块状格式化上下文元素(BFC)

(2)父级和第一个/最后一个子元素的margin合并。

解决办法:

对于margin-top合并,可以进行如下操作(满足一个条件即可):
•父元素设置为块状格式化上下文元素;
•父元素设置border-top值;
•父元素设置padding-top值;
•父元素和第一个子元素之间添加内联元素进行分隔。

对于margin-bottom合并,可以进行如下操作(满足一个条件即可):
•父元素设置为块状格式化上下文元素;
•父元素设置border-bottom值;
•父元素设置padding-bottom值;
•父元素和最后一个子元素之间添加内联元素进行分隔;
•父元素设置height、min-height或max-height。

(3)空块级元素的margin合并。

解决办法:
•设置垂直方向的border;
•设置垂直方向的padding;
•里面添加内联元素(直接Space键空格是没用的);
•设置height或者min-height。

回答:

margin重叠指的是在垂直方向上,两个相邻元素的margin发生重叠的情况。

一般来说可以分为四种情形:

第一种是相邻兄弟元素的marin-bottom和margin-top的值发生重叠。这种情况下我们可以通过设置其中一个元素为BFC来解决。

第二种是父元素的margin-top和子元素的margin-top发生重叠。它们发生重叠是因为它们是相邻的,所以我们可以通过这一点来解决这个问题。我们可以为父元素设置border-top、padding-top值来分隔它们,当然我们也可以将父元素设置为BFC来解决。

第三种是高度为auto的父元素的margin-bottom和子元素的margin-bottom发生重叠。它们发生重叠一个是因为它们相邻,一个是因为父元素的高度不固定。因此我们可以为父元素设置border-bottom、padding-bottom来分隔它们,也可以为
父元素设置一个高度,max-height和min-height也能解决这个问题。当然将父元素设置为BFC是最简单的方法。

第四种情况,是没有内容的元素,自身的margin-top和margin-bottom发生的重叠。我们可以通过为其设置border、padding或者高度来解决这个问题。

四、对 BFC 规范(块级格式化上下文:block formatting context)的理解?

相关知识点:

块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

通俗来讲

•BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
•如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。

创建BFC

(1)根元素或包含根元素的元素
(2)浮动元素float=left|right或inherit(≠none)
(3)绝对定位元素position=absolute或fixed
(4)display=inline-block|flex|inline-flex|table-cell或table-caption
(5)overflow=hidden|auto或scroll(≠visible)

回答:

BFC指的是块级格式化上下文,一个元素形成了BFC之后,那么它内部元素产生的布局不会影响到外部元素,外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域,和其他区域互不影响。

一般来说根元素是一个BFC区域,浮动和绝对定位的元素也会形成BFC,display属性的值为inline-block、flex这些属性时也会创建BFC。还有就是元素的overflow的值不为visible时都会创建BFC。

资料参考:

《深入理解 BFC 和 MarginCollapse》icon-default.png?t=N7T8https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

《前端面试题-BFC(块格式化上下文)》icon-default.png?t=N7T8https://segmentfault.com/a/1190000013647777

五、IFC 是什么?

IFC指的是行级格式化上下文,它有这样的一些布局规则:

(1)行级上下文内部的盒子会在水平方向,一个接一个地放置。
(2)当一行不够的时候会自动切换到下一行。
(3)行级上下文的高度由内部最高的内联盒子的高度决定。

资料参考:

《[译]:BFC 与 IFC》icon-default.png?t=N7T8https://segmentfault.com/a/1190000004466536#articleHeader5

《BFC 和 IFC 的理解(布局)》icon-default.png?t=N7T8https://blog.csdn.net/paintandraw/article/details/80401741

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/40685.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电脑f盘的数据回收站清空了能恢复吗

随着信息技术的飞速发展,电脑已成为我们日常生活和工作中不可或缺的设备。然而,数据的丢失或误删往往会给人们带来极大的困扰。尤其是当F盘的数据在回收站被清空后,许多人会陷入绝望,认为这些数据已无法挽回。但事实真的如此吗&am…

WAIC 2024:科技界的摇滚狂欢,你错过了什么?

大数据产业创新服务媒体 ——聚焦数据 改变商业 2024年7月5日,WAIC 2024举办的第二天。数据猿作为受邀媒体,在今天继续亲历这一场关于未来的盛会。在这片汇聚了全球顶尖科技力量的舞台上,见证了人工智能领域的最新成果,感受到了科…

大学生电子设计大赛超全资料分享

超全大学生电子设计大赛项目合集免费分享 电赛竞赛资料大全,新增竞赛空间电子设计资料。包含嵌入式硬件和软件开发的学习资料,包括PCB教程,单片机例程, 单片机课程设计毕业设计参考资料、项目设计方案,源码和开发文档…

分布式事务get global lock fail Xid 获取全局锁失败

问题如下: 解决方法:在发生报错的方法上添加本地事务

Day05-03-Nexus仓库

Day05-03-Nexus仓库 05-nexus-仓库1. 概述2. 极速部署指南2.1 下载2.2 部署2.3 配置2.4 连接使用nexus2.4 编译与测试 3. 总结 05-nexus-仓库 1. 概述 背景: maven编译的时候,npm/cnpm编译,需要下载大量的依赖包。这些依赖包在每一次构建的时候都需要使…

React 省市查询组件完整代码

目录 一、地区文件 二、Antd配合使用 三、实现效果 一、地区文件 下载地址:全国省市区数据_JSON格式_SQL格式 export const chinaArea {0: {1: 北京,2: 天津,3: 河北省,4: 山西省,5: 内蒙古自治区,6: 辽宁省,7: 吉林省,8: 黑龙江省,9: 上海,10: 江苏省,11: 浙…

维护和管理LDAP之OpenDJ

目录 基本介绍 服务专有名词 安装 命令行工具 密码管理 重置管理员密码 管理服务器进程 管理索引 如何搜索 管理索引 管理目录数据 测试数据 导出数据 导入数据 LDIF文件数据查看和比较 数据存储-Backends 配置连接 开启 HTTP/HTTPS连接 使用 REST访问 -open…

Spring AOP、Spring MVC工作原理、发展演变、常用注解

Spring AOP 概念 AOP全称为Aspect Oriented Programming,表示面向切面编程。切面指的是将那些与业务无关,但业务模块都需要使用的功能封装起来的技术。 AOP基本术语 **连接点(Joinpoint):**连接点就是被拦截到的程序执…

AQWA | 水动力分析 二阶波浪力

🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&…

Midjourney对图片细微调整和下载保存

点击v2是对第二图片细微调整。 点击u3对第3张图片进行放大。 保存图片: 对点击u3放大的图片,双击 , 右键保存图片

停车场小程序的设计

管理员账户功能包括:系统首页,个人中心,车主管理,商家管理,停车场信息管理,预约停车管理,商场收费管理,留言板管理 微信端账号功能包括:系统首页,停车场信息…

审核平台前端新老仓库迁移

背景 审核平台接入50业务,提供在线审核及离线质检、新人培训等核心能力,同时提供数据报表、资源追踪、知识库等工具。随着平台的飞速发展,越来越多的新业务正在或即将接入审核平台,日均页面浏览量为百万级别。如今审核平台已是公司…

代码提交错分支了怎么办?

你有么有遇到过正在开发的代码,提交到生产环境的分支去,遇到这种情况怎么办? 问题重现: 这段注释// AAAAAAAAAAA 本来应该写在dev分支的,现在提交并push到master分支了 现在第一步,撤回提交 第二步&…

MySQL的Geometry数据处理之WKB方案

MySQL的Geometry数据处理之WKT方案:https://blog.csdn.net/qq_42402854/article/details/140134357 MySQL的Geometry数据处理之WKT方案中,介绍WTK方案的优点,也感受到它的繁琐和缺陷。比如: 需要借助 ST_GeomFromText和 ST_AsTex…

qt结合vs2022安装

进入清华大学开源软件: 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 下载完成后,双击进行安装: 进入邮箱进行验证: 可能是因为网络问题,无法安装。 重新安装5.12.12版本。 安装后启动失败,重新…

横截面交易策略:概念与示例

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学,点击下方链接报名: 量化投资速成营(入门课程) Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…

数据结构--单链表实现

欢迎光顾我的homepage 前言 链表和顺序表都是线性表的一种,但是顺序表在物理结构和逻辑结构上都是连续的,但链表在逻辑结构上是连续的,而在物理结构上不一定连续;来看以下图片来认识链表与顺序表的差别 这里以动态顺序表…

WGAN(Wassertein GAN)

WGAN E x ∼ P g [ log ⁡ ( 1 − D ( x ) ) ] E x ∼ P g [ − log ⁡ D ( x ) ] \begin{aligned} & \mathbb{E}_{x \sim P_g}[\log (1-D(x))] \\ & \mathbb{E}_{x \sim P_g}[-\log D(x)] \end{aligned} ​Ex∼Pg​​[log(1−D(x))]Ex∼Pg​​[−logD(x)]​ 原始 GAN …

springboot基于Java的超市进销存系统+ LW+ PPT+源码+讲解

第三章系统分析与设计 3.1 可行性分析 一个完整的系统,可行性分析是必须要有的,因为他关系到系统生存问题,对开发的意义进行分析,能否通过本网站来补充线下超市进销存管理模式中的缺限,去解决其中的不足等&#xff0c…

6域名系统DNS

《计算机网络》第7版,谢希仁 每次记不清楚的知识点,通过上网查找,总是只能看到很零碎的答案。最后还是最喜欢看这个版本的书,一看就回忆起来了,逻辑严谨,循循善诱,知识讲解的全面又清晰&#xf…