前端校招笔试

系统管理员 2022-03-14 15:48 354阅读 0赞

1.写出你所熟知的行元素，块元素和空(void)元素

行元素：span, a, i, img, button, input, strong, em, lable, code,selet,textarea

块元素：div, p, h1-h6, ul,ol, li, table, form

空元素：br, hr, img, input, link, meta

2.介绍一下盒模型

![format_png][]

/* 标准盒模型 */
    box-sizing:content-box;

/*IE盒模型*/
    box-sizing:border-box;

![format_png 1][]

3.css的选择符和优先级，那些属性可以继承，那些不能

**css权重（256进制,多个直接进行相加（派生选择器/父子选择器））**

**！important（Infinity）>行间样式（1000）>id（100）>class|属性|伪类（10）>标签选择器|伪元素（1）>通配符（0）**

CSS继承特性主要是指文本方面的继承，常用的例如：font-size , color , font-family , font-weight , text-align , text-indent , line-height

而关于与盒模型相关的不带继承。具体：

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、[table-layout][]、[vertical-align][]、[page-break-after][]、page-bread-before。

所有元素可继承：visibility和cursor。

内联元素可继承：[letter-spacing][]、[word-spacing][]、[white-space][]、[line-height][]、color、font、[font-family][]、font-size、font-style、font-variant、[font-weight][]、[text-decoration][]、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

4.如何水平竖直居中一个div

方案一：

div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，

兼容性：,IE7及之前版本不支持

div\{  
            width: \*\*px;  
            height: \*\*px;  
            background: \#ff0;  
            position:absolute;  
            left:0;  
            top: 0;  
            bottom: 0;  
            right: 0;  
            margin: auto;

方案二：

div绝对定位水平垂直居中【margin 负间距】     这或许是当前最流行的使用方法。

div\{  
            width:200px;  
            height: 200px;  
            background:\#ff0;  
            position: absolute;  
            left:50%;  
            top:50%;  
            margin-left:-100px;  
            margin-top:-100px;

5.H5的新特性以及移除的元素

HTML5新特性：  
图像Canvas  
多媒体video、audio  
本地存储localStorage、sessionStorage  
语义化更好的内容元素aticle、header、footer、nav、section  
表单控件date、time、canlendar、url、search  
新的技术webworker、websocket、Geolocation  
移除的元素：  
纯表现的元素u、big、center、strike、tt、font、basefont  
框架集frame、frameset、noframes

6.iframe的优缺点

iframe的缺点  
1）、页面样式调试麻烦，出现多个滚动条；  
2）、浏览器的后退按钮失效；

3）、过多会增加服务器的HTTP请求；

4）、小型的移动设备无法完全显示框架；  
5）、产生多个页面，不易管理；  
6）、不容易打印；  
7）、代码复杂，无法被一些搜索引擎解读。

iframe的优点：  
1）.iframe能够原封不动的把嵌入的网页展现出来。

2）.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3）.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4）.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

5）.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)  
现在基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发。

7.谈一谈移动端和Pc端开发的区别

第一： **PC考虑的是浏览器的兼容性**，而**移动端**开发考虑的更多的是**手机兼容性**，因为**目前不管是android**手机还是ios手机，一般**浏览器使用的都是webkit内核**，所以说做移动端开发，更多考虑的应该是**手机分辨率**的适配，和不同操作系统的略微差异化。

第二： 在部分事件的处理上，移动端多出来的事件是**触屏事件**，而**缺少的是hover事件**。 另外包括移动端**弹出的手机键盘**的处理，这样的问题在PC端都是遇不到的。

第三： 在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。

第四： 在**动画处理**上，**PC端由于要考虑IE的兼容性**，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在**手机端**，如果要做一些动画、特效等，第一选择肯定是**CSS3**，** 既简单、效率又高**。（整理自知乎）

8.display的值以及含义，position的值以及各自的定位原点

display：

1）、none： 元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden， 是保留元素的空间的。

2）、inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。

3）、block： 将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。

4）、inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。

5）、inherit：规定应该从父元素继承 display 属性的值。

position

1）、**absolute** ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

2）、**relative** ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

3）、**fixed** ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。

4）、**static** ：默认值；默认布局。

9.css3有那些新特性

1）. CSS3实现圆角（border-radius），阴影（box-shadow），边框图片border-image

2）. 对文字加特效（text-shadow、），强制文本换行（word-wrap），线性渐变（linear-gradient）

3）.旋转,缩放,定位,倾斜：transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

4）. 增加了更多的CSS选择器、多背景、rgba()；

5）. 在CSS3中唯一引入的伪元素是 ::selection ；

6）. 媒体查询(@media)，多栏布局（flex）

10.谈一谈兼容性问题，原因，方法， hack的使用技巧

原因：高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析

不同浏览器的标签默认的外补丁和内补丁不同

块属性标签float后，又有横行的margin情况下，在[IE6][]显示margin比设置的大

设置较小高度标签（一般小于10px），在IE6，[IE7][]，遨游中高度超出自己设置高度

行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

图片默认有间距

标签最低高度设置min-height不兼容

透明度的兼容CSS设置

方法：CSS hack 方法     polyfill 和 shiv

hack的使用技巧:[https://blog.csdn.net/u012950186/article/details/38537303][https_blog.csdn.net_u012950186_article_details_38537303]

12JS实现继承的方法

[https://blog.csdn.net/duyujian706709149/article/details/88078271][https_blog.csdn.net_duyujian706709149_article_details_88078271]（本人所写）

13.对this的理解

**函数预编译过程 this —> window**

**全局作用域里 this —> window**

**call/apply 可以改变函数运行时this指向**

**obj.func();   func()里面的this指向obj**

14.闭包的理解

当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存露

一下一幕由于还未学习到，故先不作答

15，JS模块化开发的理解

16.前端库  使用的工具

17.IE与其他浏览器不一样的特性

18.HTTP的状态码及其 含义

19.URL -->界面渲染完成发生了什么，浏览器渲染界面的过程

20.网页加载慢的原因和优化

[format_png]: /images/20220312/76a9ea895a484be9979f7210c5701930.png
[format_png 1]: /images/20220312/1ae3e00e1c734b9792264d6e7c7fbc44.png
[table-layout]: https://www.baidu.com/s?wd=table-layout&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Yvn1NhmHR4nWmzujI-m1n40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHDLn1bknjmsn1cdn104Pjc4rf
[vertical-align]: https://www.baidu.com/s?wd=vertical-align&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Yvn1NhmHR4nWmzujI-m1n40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHDLn1bknjmsn1cdn104Pjc4rf
[page-break-after]: https://www.baidu.com/s?wd=page-break-after&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Yvn1NhmHR4nWmzujI-m1n40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHDLn1bknjmsn1cdn104Pjc4rf
[letter-spacing]: https://www.baidu.com/s?wd=letter-spacing&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Yvn1NhmHR4nWmzujI-m1n40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHDLn1bknjmsn1cdn104Pjc4rf
[word-spacing]: https://www.baidu.com/s?wd=word-spacing&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Yvn1NhmHR4nWmzujI-m1n40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHDLn1bknjmsn1cdn104Pjc4rf
[white-space]: https://www.baidu.com/s?wd=white-space&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Yvn1NhmHR4nWmzujI-m1n40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHDLn1bknjmsn1cdn104Pjc4rf
[line-height]: https://www.baidu.com/s?wd=line-height&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Yvn1NhmHR4nWmzujI-m1n40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHDLn1bknjmsn1cdn104Pjc4rf
[font-family]: https://www.baidu.com/s?wd=font-family&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Yvn1NhmHR4nWmzujI-m1n40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHDLn1bknjmsn1cdn104Pjc4rf
[font-weight]: https://www.baidu.com/s?wd=font-weight&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Yvn1NhmHR4nWmzujI-m1n40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHDLn1bknjmsn1cdn104Pjc4rf
[text-decoration]: https://www.baidu.com/s?wd=text-decoration&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Yvn1NhmHR4nWmzujI-m1n40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHDLn1bknjmsn1cdn104Pjc4rf
[IE6]: http://xiazai.zol.com.cn/detail/11/102978.shtml
[IE7]: http://xiazai.zol.com.cn/detail/14/130213.shtml
[https_blog.csdn.net_u012950186_article_details_38537303]: https://blog.csdn.net/u012950186/article/details/38537303
[https_blog.csdn.net_duyujian706709149_article_details_88078271]: https://blog.csdn.net/duyujian706709149/article/details/88078271