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

目录:

  • 一、前言
  • 二、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源代码地址

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(持续更新中)

你可能感兴趣的:(前端面试宝典)