Web前端开发——BAT面试题汇总及答案02（持续更新中）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_44253336/article/details/100593377

一、前言

1. 做这个的初心是希望巩固自己的基础知识，当然也希望能够帮助更多的开发者！
2. 有些题目有多种答案，本文只给出了其中的一种，哪里有问题的话欢迎指出~
3. 这个栏目将持续更新，前端的小伙伴欢迎关注噢~

二、HTML&CSS篇：

21、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height
水平方向：letter-spacing
那么问题来了，关于 letter-spacing 的妙用知道有哪些么？
答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。

22、px 和 em 的区别。

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。
em 得值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,
10px=0.625em。

23、描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们的不同之处？

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使用它
们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的
默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。
你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了
一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗
体的标题）。
在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用
考虑的怪癖，像 HTML 的 audio 元素不一致或 line-height 不一致。
normalize.css源代码地址

24、display:none 与 visibility:hidden 的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将
“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完
全透明），而它所占据的空间位置仍然存在。

25、CSS 中 link 和@import 的区别是：

Link 属于 html 标签，而@import 是 CSS 中提供的
在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加
载引用的 CSS
@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

26、为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏
览器之间的显示差异
但是初始化 CSS 会对搜索引擎优化造成小影响

27、BFC 是什么?

BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局
不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠
的问题
BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外
元素的布局，这个渲染区域只对块级元素起作用

28、对 WEB 标准以及 W3C 的理解与认识

答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、
结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更
广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提
供打印版本而不需要复制内容、提高网站易用性。

29、行内元素有哪些?块级元素有哪些?空(void)元素有那些？CSS 的盒模型?

（1）CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认
的 display 值，比如 div 默认 display 属性值为“block”，成为“块级”元素；span 默认
display 属性值为“inline”，是“行内”元素。块级元素：div p h1 h2 h3 h4 form ul
（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul
ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：
< br >< hr>< img>< input>< link>< meta>
CSS 的盒模型?
（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和
pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

30、前端页面有哪三层构成，分别是什么?作用是什么?

答：结构层 Html 表示层 CSS 行为层 js。

31、如何居中 div,如何居中一个浮动元素?

给 div 设置一个宽度，然后添加 margin:0 auto 属性
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素
确定容器的宽高 宽 500 高 300 的层
设置层的外边距
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}

32、列出 display 的值，说明他们的作用。position 的值，relative 和 absolute定位原点是？

1. block 象块类型元素一样显示。
   none 缺省值。向行内元素类型一样显示。
   inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
   list-item 象块类型元素一样显示，并添加样式列表标记。
   2.position 的值
   *absolute
   生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
   *fixed （老 IE 不支持）
   生成绝对定位的元素，相对于浏览器窗口进行定位。
   *relative
   生成相对定位的元素，相对于其正常位置进行定位。
   *static 默认值。没有定位，元素出现在正常的流中
   *（忽略 top, bottom, left, right z-index 声明）

33、哪些 css 属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;

34、b 标签和 strong 标签,i 标签和 em 标签的区别？

strong 和em 有语义，b 标签和 strong 标签则无。

35、有那些行内元素、有哪些块级元素、盒模型？

1.内联元素(inline element)
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
big – 大字体
br – 换行
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
label – 表格标签
s – 中划线(不推荐)
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
var – 定义变量
2、块级元素
address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是 css layout 的主要标签
dl – 定义列表
fieldset – form 控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3 级标题
h4 – 4 级标题
h5 – 5 级标题
h6 – 6 级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames 可选内容，（对于不支持 frame 的浏览器显示此区块内容）
noscript – ）可选脚本内容（对于不支持 script 的浏览器显示此内容）
ol – 排序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表
3.CSS 盒子模型包含四个部分组成：
内容、填充（padding）、边框（border）、外边界（margin）。

36、我想让行内元素跟上面的元素距离 10px，加 margin-top 和 padding-top 可以吗？

不可以，margin-top,padding-top 无效。

三、JS 基础篇

1、javascript 的 typeof 返回哪些数据类型

object number function boolean underfind string
typeof null;//object
typeof isNaN;//
typeof isNaN(123)
typeof [];//object
Array.isARRAY(); es5
toString.call([]);//”[object Array]” var arr=[];
arr.constructor;//Array

2、例举 3 种强制类型转换和 2 种隐式类型转换?

强制（parseInt,parseFloat,Number()）
隐式 ( == )
1 == ”1” //true
null==undefined //true

3、split() join() 的区别

前者是切割成数组的形式，
后者是将数组转换成字符串

4、数组方法 pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

---

前端面试题系列将会持续更新，欢迎关注该博客~

相关文章推荐：
Web前端开发——BAT面试题汇总及答案01（持续更新中）