前端面试题(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…

1071. 字符串的最大公因子

1071. 字符串的最大公因子 题目链接:1071. 字符串的最大公因子 代码如下: class Solution { public:int gcd(int a,int b){return b0?a:gcd(b,a%b);}string gcdOfStrings(string str1, string str2) {if(str1str2!str2str1) {return ""…

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

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

双人贪吃蛇代码分享

一. snake.h #include<stdio.h> #include<stdlib.h> #include<Windows.h> #include<stdbool.h> #include<locale.h> #include<time.h> #define Pos_x1 24 #define Pos_y1 5#define Pos_x2 24 #define Pos_y2 15 #define WALL L□#define …

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

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

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

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

压缩解压文件工具

一、maven依赖 <dependency><groupId>net.lingala.zip4j</groupId><artifactId>zip4j</artifactId><version>2.11.5</version></dependency>二、工具类 package com.summer.toolkit.util;import com.summer.toolkit.excepti…

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编译的时候&#xff0c;npm/cnpm编译&#xff0c;需要下载大量的依赖包。这些依赖包在每一次构建的时候都需要使…

React 省市查询组件完整代码

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

Perl 语言入门学习指南:探索高效脚本编程的奥秘

引言 Perl&#xff0c;全称Practical Extraction and Report Language&#xff0c;是一种功能强大的编程语言&#xff0c;特别擅长于文本处理、报告生成以及系统自动化管理任务。自1987年诞生以来&#xff0c;Perl凭借其灵活性、强大的内置功能库和广泛的社区支持&#xff0c;…

维护和管理LDAP之OpenDJ

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

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

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

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

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

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

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

停车场小程序的设计

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

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

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

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

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

第1章 认识 Vite

明白了&#xff0c;这里是第1章内容的详细展开版本&#xff1a; 第1章 认识 Vite 1 . 什么是 Vite Vite 是一个由尤雨溪&#xff08;Vue.js 的创始人&#xff09;开发的前端构建工具&#xff0c;旨在提供极快的开发体验。Vite 的名字来源于法语&#xff0c;意为“快速”&…

python绘制一维离散点

在Python中&#xff0c;绘制一维离散点通常意味着我们要在一条直线上标记出几个特定的点。这可以通过多种库来实现&#xff0c;但最常见和强大的库之一是matplotlib。以下是一个详细的代码示例&#xff0c;它展示了如何使用matplotlib库来绘制一维离散点&#xff0c;并且这个示…

C++语言常见错误分析汇总

在一个工程里出现两个main函数时 3.obj : error LNK2005: _main already defined in file1.obj Debug/HELLO.exe : fatal error LNK1169: one or more multiply defined symbols found 这个就是说&#xff0c;你的main函数重定义了。你看看是不是你的工程里面&#xff0c;包…