前端真题面试必备面试题及答案
1.overflow: scroll 时不能平滑滚动的问题怎么处理?
监听滚轮事件,然后滚动到一定距离时用 jquery
的 animate
实现平滑效果。
2.transform、animation和animation-duration的区别?
Transform
: 它和width
、left
一样,定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能,通过一系列功能的组合我们可以实现很炫酷的静态效果(非动画)。Animation
: 作用于元素本身而不是样式属性,属于关键帧动画的范畴,它本身被用来替代一些纯粹表现的javascript
代码而实现动画,可以通过keyframe
显式控制当前帧的属性值。animation-duration
:规定完成动画所花费的时间,以秒或毫秒计。
3.对 line-height 是如何理解的?
line-height
指的是一行字的高度,包含了字间距,实际上是下一行基线到上一行基线的距离。如果一个标签没有定义height
属性,那么其最终表现的高度是由line-height
决定的。一个容器没有设置高度,那么撑开容器的高度的是line-height
,而不是容器内部的文字内容。把line-height
值设置为height
一样大小的值可以实现单行文字的垂直居中。line-height
和height
都能撑开一个高度,height
会触发haslayout
,而line-height
不会。
4.抽离样式模块怎么写?述其思路。
可将css
拆分成两部分: 公共CSS
和业务CSS
。
网站的配色,字体,交互提取出为公共的CSS
。这部分的CSS
命名不应涉及具体的业务。对于业务CSS
,需要有统一的命名,使用公共的前缀。
5.在网页中的应该使用奇数还是偶数的字体?
在网页中的应该使用“偶数”字体:
偶数字号相对更容易和 web
设计的其他部分构成比例关系,使用奇数号字体时文本段落无法对齐,宋体的中文网页排布中使用最多的就是 12
和 14
。
6.css hack原理及常用hack有哪些?
原理: 利用不同浏览器对CSS
的支持和解析结果不一样编写针对特定浏览器的样式。
常见的hack
有: 属性hack、选择器hack、IE条件注释。
7.link 与 @import 的区别?
link
是HTML
方式,@import
是CSS
方式;link
最大限度支持并行下载,@import
过多嵌套导致串行下载,出现FOUC
;link
可以通过rel="alternate stylesheet"
指定候选样式;- 浏览器对
link
支持早于@import
,可以使用@import
对老浏览器隐藏样式; @import
必须在样式规则之前,可以在css文件中引用其他文件;
总的来说: link
优于@import
。
8.什么是 FOUC(Flash of Unstyled Content)? 如何来避免 FOUC?
当使用@import
导入CSS
时,会导致某些页面在IE
出现奇怪的现象: 没有样式的页面内容显示瞬间闪烁,这种现象被称为“文档样式暂时失效”,简称FOUC
。
产生原因: 当样式表晚于结构性html加载时,加载到此样式表时,页面将会停止之前的渲染。等待此样式表被下载和解析后,再重新渲染页面,期间导致短暂的花屏现象。
解决办法: 只要在<head>
之间加入一个<link>
或者<script>``</script>
元素即可。
9.display,float,position有什么关系?
- 如果
display
为none
,那么position
和float
都不起作用,元素不显示; - 如果
position
值为absolute
或者fixed
,元素绝对定位,float
的计算值为none
,display
根据下面的表格进行调整; - 如果
float
不是none
,框是浮动的,display
根据下表进行调整; - 其他情况下
display
的值为指定值 总结起来:绝对定位、浮动、根元素都需要调整display
;
10.外边距折叠(collapsing margins)
毗邻的两个或多个margin
会合并成一个margin
,叫做外边距折叠。规则如下:
- 两个或多个毗邻的普通流中的块元素垂直方向上的
margin
会折叠; - 浮动元素或
inline-block
元素或绝对定位元素的margin
不会和垂直方向上的其他元素的margin
折叠; - 创建了块级格式化上下文的元素,不会和它的子元素发生
margin
折叠; - 元素自身的
margin-bottom
和margin-top
相邻时也会折叠;
11.有哪几种隐藏元素的方法?
visibility: hidden;
这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在;opacity: 0;``CSS3
属性,设置0可以使一个元素完全透明;position: absolute;
设置一个很大的 left 负值定位,使元素定位在可见区域之外;display: none;
元素会变得不可见,并且不会再占用文档的空间;transform: scale(0);
将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留;<div hidden="hidden">
HTML5
属性,效果和display:none;
相同,但这个属性用于记录一个元素的状态;height: 0;
将元素高度设为 0 ,并消除边框;filter: blur(0);
CSS3
属性,括号内的数值越大,图像高斯模糊的程度越大,到达一定程度可使图像消失;
12.li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
li
排列受到中间空白(回车/空格)等的影响,因为空白也属于字符,会被应用样式占据空间,产生间隔。解决办法:
- 在
ul
中用font-size:0
(谷歌不支持);可以使用letter-space:-3px;
- 设置
float:left;
13.对浏览器内核的理解?
浏览器内核主要分为两个部分: 渲染引擎和js引擎;
- 渲染引擎: 负责取得页面的内容(
html
,xml
, 图像等)、整理讯息(加入css
等)、以及计算网页的显示方式,然后对输出至显示器或者打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不同。所有网页浏览器、电子邮件客户以及其他所需要编辑、显示网络的应用程序都需要内核。 JS
引擎: 解析和执行Javascript
来实现网页的动态效果。
最开始渲染引擎和js
引擎没有明确的区分,后来js
引擎越来越独立,内核就倾向于只渲染引擎。
14.对WEB标准以及W3C的理解与认识
对于结构的要求:(规范的标签可以提高搜索引擎对页面的抓取效率,对SEO
很有帮助)
- 标签要闭合
- 标签字母小写
- 标签不允许随意嵌套
对于CSS
和JS
来说:
- 尽量使用外链
CSS
样式表和JS
脚本。同时结构,表现和行为分为三块,符合规范。此外,还得提高页面渲染速度,提高用户体验。 - 尽量少用行内样式,保证结构和表现分离。标签的
id
和class
等的属性命名要做到见文知意,标签越少,加载越快,用户体验就会越高。同时代码方面也会更易于维护,便于改版。 - 不需要变动内容,便可一同打印版本而不需要复制内容,提高网站易用性。
15.制作一个访问量很大的网站,如何管理所有的css文件,js和图片?
从人手,分工和同步方面回答:
- 前期团队必须确认好全局样式,编码模式;
- 代码风格,编写习惯保持一致;
- 标注样式编写人,各模块都要及时标注(标注关键样式调用的地方);
- 对自己负责的页面进行标注;
CSS
和JS
分文件夹存并行存放,命名都要统一;JS
分文件夹存放,明明以该JS
功能为准的英文翻译;- 图片采用整合的
.png
格式存放,尽量整合在一起,方便将来管理;
16.视差滚动效果以及如何实现?
视差滚动(Parallax Scrolling)
指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术(3D效果)。
实现方式:
CSS3
实现: 优点是开发时间相对较短,性能和开发效率比较好。缺点是不能兼容到低版本的浏览器;JQuery
实现:(通过控制不同层滚动速度,计算每一层的时间)优点是能兼容到各个版本,效果可控性好,缺点是开发起来对制作者的要求较高;- 插件实现方式: 例如使用
parallax-scrolling
,兼容性十分好;
17.对BFC规范(块级格式化上下文:block formatting context)的理解
BFC
规定了内部的Block Box
如何布局。一个页面是由很多个Box
组成的,元素的类型和display
属性,决定了这个Box
的类型。不同类型的box
,会参与不同的Formatting Context
(决定如何渲染文档的容器),因此Box
内的元素会以不用的方式渲染,也是就是说BFC
内部的元素和外部的元素不会相互影响。
定位方案:
- 内部的
box
会在垂直方向上一个接一个的放置; box
垂直方向的距离由margin
决定,属于同一个BFC
的两个相邻Box
的margin
会发生重叠;- 每个元素
margin box
的左边,与包含块border box
的左边相接触; BFC
的区域不会与float box重叠;BFC
是页面上的一个隔离的独立容器,容器里面的元素不会影响到外面的元素;- 计算
BFC
的高度时,浮动元素也会参与计算。
满足下列条件之一就可以出发BFC:
- 根元素变化,即
html
; float
的值不为none
(默认);overflow
的值不为visible
(默认);display
的值为inline-block
,tabke-cell
,table-caption
;position
的值为absolute
或fixed
;
18.元素竖向的百分比设定是相对于容器的高度吗?
一般来说,子元素的百分比单位都是以父元素为依据。但是margin
和padding
例外。元素的height
是相对于容器的高度,但是元素的margin
和padding
是相对于容器的宽度。
19.经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
(1)、问题:png24
位的图片在ie
浏览器上出现背景。解决: 做成png8
;
(2)、问题:浏览器默认的margin
和padding
不同。 解决: 添加一个全局的*{ margin: 0; padding: 0;}
;
(3)、问题:IE
下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()
获取自定义属性,而Firefox
下,只能使用getAttribute()
获取自定义属性。 解决: 统一通过getAttribute()
获取自定义属性;
(4)、问题: IE
下,event
对象有x
,y
属性,但是没有pageX
,pageY
属性,而Firefox
下,event
对象有pageX
,pageY
属性,但是没有x
,y
属性。 解决: 使用mX(mX = event.x ? event.x : event.pageX;)
来代替IE
下的event.x
或者Firefox
下的event.pageX
。
20.在网页中的应该使用奇数还是偶数的字体?
一般情况下,在网页中,应该使用 偶数 字体。原因:
- 偶数字号相对更容易和
web
设计的其他部分构成比例关系; - 使用基数字号时文本段落无法对齐;
- 宋体的中文网页排布中使用最多的是12号和14号。
前端真题面试必备面试题及答案相关推荐
- 教师资格证考试备考资料大合集(历年真题+常用考点+模拟试题+面试),共460份,987M,附件中为网盘链接
教师资格证考试备考资料大合集(历年真题+常用考点+模拟试题+面试),共460份,987M,附件中为网盘链接. 下载地址:https://download.csdn.net/download/mengc ...
- 2019 最全阿里天猫Java 3面真题,含面试题答案!
1 阿里天猫Java一面 自我介绍 jvm GC原理,JVM怎么回收内存 ConcurrentHashMap是怎么解决并发问题的? HashMap怎么从链表转换为红黑树?如果存入的是null键,放在桶 ...
- 2019头条抖音Java 3面真题,含面试题答案!
一面: hashmap,怎么扩容,怎么处理数据冲突?怎么高效率的实现数据迁移? Linux的共享内存如何实现,大概说了一下. socket网络编程,说一下TCP的三次握手和四次挥手 同步IO和异步IO ...
- 前端面试常见面试题及答案
前端面试常见面试题及答案 h5新特性 ES6新特性 vuex的理解,组成以及原理介绍 前端常用框架 h5新特性 html5总的来说比html4多了十个新特性,但其不支持ie8及ie8以下版本的浏览器 ...
- 2022年二级建造师考试-冲刺押题(历年真题+习题解析+模考试题+答案+知识点强化+文档总结),共2074份,32.2G(附件中为网盘链接)
2022年二级建造师考试-冲刺押题(历年真题+习题解析+模考试题+答案+知识点强化+文档总结),共2074份,32.2G(附件中为网盘链接). 下载地址:https://download.csdn.n ...
- 作业帮 php面试题,英文题目的PHP面试题及答案
英文题目的PHP面试题及答案 PHP工程师是计算机专业学生求职的一个方向,以下是百分网小编精心为大家整理的PHP面试题 ,希望对大家顺利通过面试有所帮助!更多内容请关注应届毕业生网! 1. Which ...
- 网络技能大赛-2019年国赛真题[2019年全国职业技能大赛高职组计算机网络应用赛项真题-H卷]路由交换部分答案详解
网络技能大赛-2019年国赛真题[2019年全国职业技能大赛高职组计算机网络应用赛项真题-H卷]路由交换部分答案详解 2022年全国职业技能大赛网络系统管理赛项相较2021年再次做出改动,Linux部 ...
- 网络教育计算机统考40分单选,2021年6月网络教育统考《计算机应用基础》统考必过题库最全试题及答案...
<2021年6月网络教育统考<计算机应用基础>统考必过题库最全试题及答案>由会员分享,可在线阅读,更多相关<2021年6月网络教育统考<计算机应用基础>统考必 ...
- 7.牛批了 Android 2022高级资深面试题 一线大厂和二线大厂面试真题精选 (大疆 附答案)第七套 30k+
笔者是面霸,面试500+场 当过考官:面过别人500+场 去过500强,也呆过初创公司. 斩获腾讯.华为.字节跳动,蚂蚁金服,OPPO,美团,安卓岗offer!我有一套速通大厂技巧 ...
- 8.牛批了 Android 2022高级 资深面试题 一线大厂和二线大厂面试真题精选 (腾讯 附答案)第八套 35k+
笔者是面霸,面试500+场 当过考官:面过别人500+场 去过500强,也呆过初创公司. 斩获腾讯.华为.字节跳动,蚂蚁金服,OPPO,美团,安卓岗offer!我有一套速通大厂技巧 ...
最新文章
- python多功能电子钟_python gui - PyQt4 精彩实例分析之电子钟
- java generatorconfig_generatorConfig.xml配置信息详细
- python难嘛-我没有基础,能否学会Python?Python难吗?
- 正则学习小结(1)-基础
- C++、C#写的WebService相互调用
- 每天一小时python官方文档学习(四)————数据结构之列表
- 【BZOJ1499】【NOI2005】瑰丽华尔兹(动态规划)
- 工作学习资料备份记录
- Linus改变世界的一次代码提交:git的诞生
- Dart 基礎 - 3
- 我很忙,我没有时间,所以我无法成为更有价值的人
- 云知声开源全栈语音交互方案
- 正好配资在线开户叶飞带崩小票
- 在图片上加滚动文字html,如何让文字在图片上滚动
- win10下pytorch-gpu安装以及CUDA详细安装过程
- idea如何设置导包不带*号
- uni-app开发中遇到的问题(持续更新...)
- ios 反编译 破解
- ACM/ICPC竞赛指南
- ifm电感式传感器IE5238
热门文章
- 一卡通管理系统数据库服务器连接失败,智能一卡通管理系统数据库服务器连接失败...
- 摸索Detours 3:使用Detours 采用dll 方式进行Hook
- MATLAB绘图—三维等值线绘图(contour3)
- JAVA数据库访问控制框架设计与使用
- java-net-php-python-jspm网上订餐系统查重PPT计算机毕业设计程序
- JESD204B学习之关键点问答
- Linux网卡驱动(4)—DM9000网卡驱动程序完全分析
- python插值算法_python插值算法
- r语言和python哪个难学_明明R语言比python容易学的多,为什么还有那么多人说R语言学起来陡峭?...
- 什么软件可以测试睡眠质量心率,Beddit:粘在床上就能测试心率的睡眠监测器