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

Love The Way You Lie 2024-04-18 13:23 63阅读 0赞

### 目录： ###

*  一、前言
 *  二、HTML&CSS篇：
 *   *   *   *  21、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
             *  22、px 和 em 的区别。
             *  23、描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们的不同之处？
             *  24、display:none 与 visibility:hidden 的区别是什么？
             *  25、CSS 中 link 和@import 的区别是：
             *  26、为什么要初始化样式？
             *  27、BFC 是什么?
             *  28、对 WEB 标准以及 W3C 的理解与认识
             *  29、行内元素有哪些?块级元素有哪些?空(void)元素有那些？CSS 的盒模型?
             *  30、前端页面有哪三层构成，分别是什么?作用是什么?
             *  31、如何居中 div,如何居中一个浮动元素?
             *  32、列出 display 的值，说明他们的作用。position 的值，relative 和 absolute定位原点是？
             *  33、哪些 css 属性可以继承？
             *  34、b 标签和 strong 标签,i 标签和 em 标签的区别？
             *  35、有那些行内元素、有哪些块级元素、盒模型？
             *  36、我想让行内元素跟上面的元素距离 10px，加 margin-top 和 padding-top 可以吗？
 *  三、JS 基础篇
 *   *   *   *  1、javascript 的 typeof 返回哪些数据类型
             *  2、例举 3 种强制类型转换和 2 种隐式类型转换?
             *  3、split() join() 的区别
             *  4、数组方法 pop() push() unshift() shift()

# 一、前言 #

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源代码地址][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()头部删除

--------------------

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

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

[normalize.css]: https://blog.csdn.net/weixin_44253336/article/details/100593688
[Link 1]: https://blog.csdn.net/weixin_44253336
[Web_BAT_01]: https://blog.csdn.net/weixin_44253336/article/details/100544984