前端面试题(未完待续)

 第一部分-------------html,css js基础

1.让一个不定宽高的div,水平垂直居中

1.使用flex:在父盒子中设置

display:flex;
justify-content:center;
align-items:center;

2.使用css3 transform:

父盒子设置:

position:relative

子盒子设置:

transform:translate(-50%,-50%);
position:absolute;
top:50%;
left:50%;

3.已知父元素有高度且只有一个子元素,设置:

position:absolute;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;

2.px,em,rem三者的区别?

px:像素(Pixel)。绝对单位,像素px是相对于显示器屏幕分辨率而言的,是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI。

em:是相对长度单位,相对于当前对象内文本的字体大小,如当前对行内文本的字体尺寸未被人设置,则相对于浏览器的默认字体大小,它会继承父级元素的字体大小,因此并不是一个固定的值。

rem:是css3中新增的一个相对单位,(root em,根em),使用rem为元素设定字体大小时,仍然是相对大小,但相对的是HTML根元素。

区别:IE无法调整那些使用px作为单位的字体大小,而em和rem可以缩放,rem相对的只是HTMl的根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体的大小,又可以避免字体大小逐层复合的连锁反应,目前,除了IE8及更早的版本外,所有浏览器已支持rem。

3.css引入方式有哪些?link和@import的区别是?

引入方式:内联,内嵌,外链,导入

区别:同时加载,前者无兼容性,后者css2.1以下的浏览器不支持,link支持使用JavaScript改变样式,后者不可。

4.div+css的布局较table布局有什么优点?

1.改版的时候更方便,只要更改css文件

2.页面加载速度更快,结构化清晰,页面显示简洁。

3.表现与结构相分离。

4.易于优化(seo)搜索引擎更友好,排名更容易靠前。

5.描述css reset的作用和用途?

Reset重置浏览器的css默认属性,浏览器的品种不同,样式不同,然后重置,让他们统一。

6.解释css sprites,如何使用?

css精灵图,把一堆小的图片,整合到一张大的图片(png)上,减轻服务器对图片的请求数量。

7.简述src和herf的区别

src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。

src是source的缩写,指向外部资源的位置,指向的内容会嵌入到文档中当前标签所在位置,在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

<script scr="indes.js"></script>

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载,编译,执行完毕,图片和框架等元素也是如此,类似于将所指向资源嵌入当前标签内,这也为什么将js脚本放在底部而不是头部。

href是Hypertext Referencede 缩写,指向网络资源所在的位置,建立和当前元素(锚点)或当前文档(链接)直接的链接,如果我们在文档中添加

<link href="index.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件,就回并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link的方式来加载css,而不是使用@import。

8.vue 如何实现按需加载配合 webpack 设置


webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入,改为const定义的方式进行引入。

页面不按需加载引入方式:import home from '../../common/home.vue'

页面按需加载引入方式:

const home = r => require.ensure( [], () => r (require('../../common/home.vue')))


 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值