中软高科WEB前端面试题

一个朋友面试的题目，百度了一下这个中软高科貌似是一个培训机构。。。以下答案是我本人的理解，仅供参考

 

HTML+CSS

1、你能解释一下css的盒子模型吗？

　　有两种盒子模型：IE盒子模型，W3C盒子模型。

　　标准的CSS盒子模型包括：内容（content）、填充（padding）、边框（border）、边距（margin）。

　　

 

2、XHTML和HTML的区别？

　　最主要的差别：XHTML元素必须被正确的嵌套，XHTML必须被关闭，标签名必须用小写，XHTML文档必须拥有根元素。

　　详细文章可以参考：HTML和XHTML的区别

 

3、行内元素有哪些？块级元素有哪些？

　　1） 行内元素有：a  b  span  img  input  select  strong ...；

　　2） 块级元素有：div  header  main  footer  section  ul  p  h1  h2 ...；

 

4、CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和 important哪个优先级高？

　　1） id选择器（#）、类选择器（.）、标签选择器（div）、兄弟元素选择器（div + p）、子选择器（ul>li）、后代选择器（div a）、通配符选择器（*）、属性选择器（input[type="number"]）、伪类选择器（a:hover，p:nth-child）

　　2） 所有元素可继承：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。

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

　　　　表格元素可继承：border-collapse。

　　3） 内联样式表的权值最高 1000；

　　　　ID 选择器的权值为 100；

　　　　Class 类选择器的权值为 10；

　　　　HTML 标签选择器的权值为 1

　　4） important比内联优先级高

 

5、前端页面有哪三层构成，分别是什么，作用是什么？

　　1） 由结构层，表示层，行为层组成

　　2） 结构层：对网页的内容作出描述；

　　　　表示层：负责如何显示内容；

　　　　行为层：对网页中的事件作出反应；

 

6、哪些浏览器支持HTML5，这些浏览器的内核分别是什么？

　　目前使用较为广泛的浏览器有：IE，Google，Firefox，Safari和Opera；

　　内核分别是：IE（Trident），WebKit，Gecko，WebKit，Presto；

 

7、写出5种以上IE6 BUG的解决办法，哪些你认为解决起来是最麻烦的？

　　1） IE6在块级元素设置左右浮动，设定的margin造成双边距bug

　　　　解决办法：display: inline;

　　2） line-height，文本垂直居中差1px

　　　　解决办法：padding-top代替line-height居中，或line-height加1或减1

　　3） img于块元素中，底边多出空白

　　　　解决办法：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

　　4） li之间会有间距

　　　　解决办法：float: left;

　　5） position下的left，bottom错位

　　　　解决办法：为父级(relative层)设置宽高或添加*zoom:1

　　

　　都很麻烦。。。

 

8、描述CSS reset的作用和用途

　　reset的作用是让各个浏览器的CSS样式有一个统一的基准，理解为初始化css样式

 

9、解释CSS sprites，如何使用？

　　Sprite是图片处理技术，俗称图片精灵。

　　1、将用到的背景图片压缩为zip格式的压缩包
　　2、用Css图片拼合生成器将其拼合成一张图片，然后下载该图片
　　3、拼合完成后会生成相应的Css规则，该文件定位了每个图片的位置及图片的宽度和高度
　　4、在Css样式中定位背景图片

 

10、你如何对网站的文件和资源进行优化？

　　1） 利用浏览器缓存js文件和css文件

　　2） 优化js，css代码，避免重用。

　　3） 使用 css sprite合并图片。

　　4） 文件合并，文件压缩。减少http请求，减少体积。

　　5） 使用cdn托管资源

 

11、什么是语义化的HTML，HTML5新增的语义化标签有哪些？

　　1） html语义化让页面的内容结构化，结构更加清晰，便于浏览器、搜索引擎解析。

　　　　使阅读代码的人对网站更容易分块，便于阅读维护和理解。

　　2） 比如：header，main，footer，canvas等

 

12、清楚浮动的几种方式，各自的优缺点。

　　1） 父级元素定义高度：优点是简单，代码少，容易掌握，缺点是只适合高度固定的布局，一旦高度不一致时就会出现问题。

　　2） 结尾处添加空div标签clear: both：优点是代码少，浏览器支持好，不容易出现怪问题，缺点是如果页面浮动布局多，就要增加很多空div，让人感觉很不爽。

　　3） 父级元素设置overflow: hidden：优点是简单，代码少，浏览器支持好，缺点是不能和position配合使用，因为超出的尺寸的会被隐藏。

　　只介绍三种。。。

 

JS

1、JavaScript 的 typeof 返回哪些数据类型？

　　返回6中数据类型：undefined，string，Boolean，number，object，function。

 

2、split() join()的区别？数组方法pop() push() unshift() shift()。

　　1） split() 方法用于把一个字符串分割成字符串数组。

　　　　join() 方法用于把数组中的所有元素放入一个字符串。

　　　　区别：前者是将字符串切割成数组的形式，后者是将数组转化为字符串。

　　2） shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值

　　　　unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度

　　　　pop() 方法用于删除并返回数组的最后一个元素

　　　　push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度

 

3、事件绑定和普通事件有什么区别？

　　普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个

 

4、IE和标准下有哪些兼容性的写法？

　　获取鼠标当前的坐标：

　　IE下event.x，event.y；

　　标准下event.pageX，event.pageY；

　　获取窗体的高度和宽度：

　　IE下document.body.offsetWidth和document.body.offsetHeight

　　标准下document.documentElement.clientWidth和document.documentElement.clientHeight

　　添加事件：

　　IE下element.attachEvent(”onclick”, func)；

　　标准下element.addEventListener(”click”, func, true)；

 

5、ajax 在请求的时候 get请求和 post请求的区别？

　　1）使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来

　　2）使用Get请求发送数据量小,Post请求发送数据量大

　　3）Get请求安全性较低，Post安全性较高