Web前端开发——BAT面试题汇总及答案02
Table of Contents
目录:
二、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()
二、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 不一致。
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定位原点是?
display的值:
- 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面试题汇总及答案02相关推荐
- Web前端开发——BAT面试题汇总及答案01
目录: 目录: HTML&CSS篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2.每个 HTML 文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 3 ...
- Web前端开发——BAT面试题汇总及答案03
目录 目录 5.JavaScript this 指针.闭包.作用域 6.事件委托是什么 7.闭包是什么,有什么特性,对页面有什么影响 8.如何阻止事件冒泡和默认事件 9.添加 删除 替换 插入到某个接 ...
- 深圳乐创互联科技有限公司 - (web前端开发工程师机试题)
web前端开发工程师机试题 面试要求可查看上方链接 效果图 代码 css: * {margin: 0;padding: 0;list-style: none;text-decoration: none ...
- Web前端开发常见面试题总结
目录 简述清除浮动的几种方式. 请描述一下 cookies.sessionStorage.localtorage区别. 常见的HTTP的状态码. css的选择器有哪些. css优化.提高性能的方法有哪 ...
- javascript前端开发最全面试题汇总
JavaScript 面试题汇总 1. 根据下面 ES6 构造函数的书写方式,要求写出 ES5 的 class Example { constructor(name) { this.name = na ...
- web里如何在背景图片上放置div元素_2020年web前端开发经典面试题总结整理(建议收藏)...
1,阐述清楚浮动的几种方式(常见问题) (1)父级div定义 height 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题. 优点:简单.代码少.容易掌握 缺点:只适 ...
- 2017年10月WEB前端开发实习生面试题总结
从大一开始学习前端,今年大三,10月份开始投简历,陆续收到很多家公司的面试,目前为止的面试通过率是百分之百,总结下面试题. 不定期更新中... 百度第一次 一面 1.AJAX流程 2.promise简 ...
- WEB前端开发工程师面试题
1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? Doctype声明位于文档中的最前面的位置,处于标签之前.此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规 ...
- 前端开发常见笔试题(附答案)
1.请写出判断变量类型的几种方法,并谈谈这几种方法的差异或者局限 1.typeof typeof 目前能返回string,number,boolean,symbol,bigint,unfined,ob ...
最新文章
- 如何在ubuntu下安装detectron2_ubuntu16.04安装detectron教程
- Spring MVC 启动
- 发布一个自己开发的网站
- 如何从S4HANA的销售订单找到对应的生产订单
- javascript之变量
- python的print怎么输出utf-8的编码_原创反转精度算法:小数的终极编码
- 使用SQL Server数据工具进行SQL单元测试
- Kbengine游戏引擎-【4】demo-kbengine_unity3d_demo 在容器docker上安装测试
- linux恢复deleted状态的文件,Linux恢复被删除的文件 How To Recover Deleted Files From Your Linux System ....
- (转)WinForm中的各种表格控件
- SQL Server详细教程
- 如何设置 IDEA炫酷主题样式
- 「云渲染」渲染农场的架构原理、特点
- #从零开始学HCIA起步
- 中国移动 OneNET 物联网平台从入门到「放弃」
- Java版本企业招投标采购管理系统源码 一站式全流程采购招标系统
- v-for报错Cannot use v-for on stateful component root element because it renders multiple elements.
- Word2003入门动画教程25:添加或改变Word页面边框
- 二维码制作(QRCode)
- The X New Developer’s Guide——第一章 基本概念
热门文章
- ResNet压缩20倍,Facebook提出新型无监督模型压缩量化方法
- PyTorch官方权威教程书来了,LeCun力荐!意外的通俗易懂
- Python 俄罗斯方块, 基于pyqt5实现俄罗斯方块 --pyqt5 进阶
- 8 个Python技巧 每天工作效率高一点 升职快人一步
- Python中的from import和import的区别?没有比这回答的更好了
- 10道python面试题,每题10分,你能的多少分!(内附python教程)
- 田渊栋团队新作:为什么非对比自监督学习效果好?
- linux mysql 挂马_linux服务器被挂马
- kali linux中文乱码解决,kali-google-chrome中文乱码问题解决方法
- golang java耗内存_分析golang内存占用情况