WEB前端开发工程师面试题.docx

该【WEB前端开发工程师面试题 】是由【hqqs9】上传分享，文档一共【5】页，该文档可以免费在线阅读，需要了解更多关于【WEB前端开发工程师面试题 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。HTML&&CSS
严格模式与混杂模式-如何触发这两种模式,区分它们有何意义
Doctype声明位于文档中的最前面的位置,处于标签之前;此标签可告知浏览器文档使用哪种HTML或XHTML规范;该标签可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的HTML文档;
当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性;为了实现这一点,他们创建了两种呈现模式:标准模式和混杂模式quirksmode;在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示;混杂模式通常模拟老式浏览器比如MicrosoftIE4和NetscapeNavigator4的行为以防止老站点无法工作;
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法;如果XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现;对于HTML文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现;包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现;DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现;

行内元素有:abspanIbemimginputselectstrong
块级元素有:divulollidldtddh1h2h3h4…p
盒模型:marginborderpaddingwidth
引入的方式有哪些link和import的区别是
使用LINK标签
,再以<link>标签引入;
<linkrel=stylesheettype="text/css"href="">
使用import引入
跟link方法很像,但必须放在<STYLE>...</STYLE>中
<STYLETYPE="text/css">
<--
importurlcss/;
-->
</STYLE>
使用STYLE标签
将样式规则写在<STYLE>...</STYLE>标签之中;
<STYLETYPE="text/css">
<--
body{color:666;background:f0f0f0;font-size:12px;}
td,p{color:c00;font-size:12px;}
-->
</STYLE>
使用STYLE属性
将STYLE属性直接加在个别的元件标签里,<元件标签STYLE="性质属性1:设定值1;性质属性2:设定值2;...}
使用<span></span>标记引入样式
<spanstyle="font:12px/20px000000;"></span>
两者区别:加载顺序的差别;当一个页面被加载的时候,link引用的CSS会同时被加载,而import引用的CSS会等到页面全部被下载完再被加载;import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:
———————-
import“”;
import“”;
这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用;
选择符有哪些哪些属性可以继承优先级算法如何计算内联和important哪个优先级高
通配选择符{sRules}
类型选择符E{sRules}
td{font-size:14px;width:120px;}
属性选择符
Eattr{sRules}
Eattr=value{sRules}
Eattr~=value{sRules}
Eattr|=value{sRules}
htitle{color:blue;}/所有具有title属性的h对象/
spanclass=demo{color:red;}
divspeed="fast"dorun="no"{color:red;}
arel~="copyright"{color:black;}
包含选择符E1E2{sRules}
tabletd{font-size:14px;}
子对象选择符E1>E2{sRules}
divul>lip{font-size:14px;}
ID选择符ID{sRules}
类选择符{sRules}
选择符分组E1,E2,E3{sRules}
伪类及伪对象选择符
E:Pseudo-Classes{sRules}
Pseudo-Classes:link:hover:active:visited:focus:first-child:first:left:right:lang
E:Pseudo-Elements{sRules}
Pseudo-Elements:first-letter:first-line:before:after
可以继承的有:font-sizefont-familycolor
不可继承的一般有:borderpaddingmarginbackground-colorwidthheight等
============================
关于CSSspecificity
CSS的specificity特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数字串CSS2是三位来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越;
在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级;
选择符Specificity值列表:
规则:
,0,0,0,高于外部定义;
如:<divstyle=”color:red”>sjweb</div>
外部定义指经由<link>或<style>标签定义的规则;
;
值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;
,它低于一切其他规则比如全局选择符定义的规则;
算法:
当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加,
{数位之间没有进制比如说:0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0}
就得到最终计算得的specificity,
然后在比较取舍时按照从左到右的顺序逐位比较;
实例分析:
{font-size:12px;}
分析:
1个元素{div},Specificity值为0,0,0,1
divp{color:green;}
分析:
3个元素{bodydivp},Specificity值为0,0,0,3
.sjweb{font-size:12px;}
分析:
1个元素{div},Specificity值为0,0,0,1
1个类选择符{.sjweb},Specificity值为0,0,1,0
最终:Specificity值为0,0,1,1
sjweb{font-size:12px;}
分析:
1个元素{div},Specificity值为0,0,0,1
1个类选择符{.sjweb},Specificity值为0,1,0,0
最终:Specificity值为0,1,0,1
>bodydivid=”totals”ulli>p{color:red;}
分析:
6个元素{htmlbodydivullip}Specificity值为0,0,0,6
1个属性选择符{id=”totals”}Specificity值为0,0,1,0
2个其他选择符{>>}Specificity值为0,0,0,0
最终:Specificity值为0,0,1,6
important的优先级最高
使用important可以改变优先级别为最高,其次是style对象,然后是id>class>tag,另外在同级样式按照申明的顺序后出现的样式具有高优先级;
前端页面由哪三层构成,分别是什么作用是什么
网页分成三个层次,即:结构层、表示层、行为层;
网页的结构层structurallayer由HTML或XHTML之类的标记语言负责创建;标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息;例如,P标签表达了这样一种语义:“这是一个文本段;”
网页的表示层presentationlayer由CSS负责创建;CSS对“如何显示有关内容”的问题做出了回答;
网页的行为层behaviorlayer负责回答“内容应该如何对事件做出反应”这一问题;这是Javascript语言和DOM主宰的领域;
css的基本语句构成是
选择器{属性1:值1;属性2:值2;……}
你做的页面在哪些流览器测试过这些浏览器的内核分别是什么经常遇到的浏览器的兼容性有哪些怎么会出现解决方法是什么
IE内核浏览器:360,傲游,搜狗,世界之窗,腾讯TT
非IE内核浏览器:firefoxoperasafarichrome
,在使用了float的情况下,不管是向左还是向右都会出现双倍,最简单的解决方法就是用display:inline;加到css里面去;
;同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px,opera下就更不一样了;解决方案:给文字设定line-height;确保所有文字都有默认的line-height值;这点很重要,在高度上我们不能容忍1px的差异;
,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效;所以不要轻易给容器定义height;
,横向上的;如果float容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行;故,内容可能撑破的浮动容器需要定义width;
,ff下不清除浮动是不行的;
,当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px;padding也会出现类似问题,都是ie6下的特产,该类bug出现的情况较为复杂,远不只这一种出现条件,还没系统整理;解决方案:外层元素设定border或设定float;
,限于篇幅,我就不展开了;还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div也有了背景,这就是吞吃现象;对应上面的背景吞吃现象,还有滚动下边框缺失的现象;解决方案:使用zoom:1;这个zoom好象是专门为解决ie6bug而生的;
~~~“多出来的一只猪;”这是前人总结这个bug使用的文案,ie6的这个bug下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变;解决方案:用“<–ifIE>picRotatestart<endif–>”方法写注释;
9.<li/>里加float<div/>,这是一个典型的,棘手的兼容问题,希望引起大家正视,给li不同的属性会有不同的解释效果,ff下的解释稍可理解,ie6下的解释会让你摸不着头脑,由于问题的复杂性,将另起一文专门讨论该问题;在ul使用心得一文里有相关成果,却没给出问题解决的过程;
;解决方案:给img设定display:block;
-height;<divstyle=”line-height:20px”><img/>文字</div>,很遗憾,在ie6下单行文字line-height效果消失了;;;,原因是<img/>这个inline-block元素和inline元素写在一起了;解决方案:让img和文字都float起来;
;a:hoverimg{width:300px}我们想让鼠标hover时,链接里包含的图片宽度变化,可惜在ie6下无效,ie7、ff下有效;
;div:hover{}这样的样式ie6是不认的,在ie7、ff下才有效果;
:hidden对其下的绝对层position:absolute或者相对层position:relative无效;解决方案:给overflow:hidden加position:relative或者position:absolute;另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持;
,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度;float元素如果作为布局用或复杂的容器,都要给个宽度的;
,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大;解决方案给内层相对层float属性;
,<head></head>内有<basetarget=”_blank”/>的情况下,position:relative层下的float层内文字无法选中;
;width:100%这个东西在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:100%才行,累啊;opera这点倒学乖了跟了ie;
如何居中一个浮动元素
设置容器的浮动方式为相对定位,然后确定容器的宽高,比如宽500高300的层,然后设置层的外边距;
div{Width:500px;height:300px;Margin:-150px00-250px;position:relative;left:50%;top:50%;}
有没有关注HTML5和CSS3如有请简单说一些您对它们的了解情况
HTML5标签的改变:<header>,<footer>,<dialog>,<aside>,<figure>,<section>等
IE9以上开始支持
CSS3实现圆角,阴影,对文字加特效,增加了更多的CSS选择器;
如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片
你对前端界面工程师这个职位是怎么样理解的它的前景会怎么样
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0;}
.clearfix{display:inline-block;}
{height:1%;}
.clearfix{display:block;}
.clearfix{zoom:1;}.clearfix:after{content:'\20';display:block;height:0;clear:both;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}/HidesfromIE-mac\/
{height:1%;}
.clearfix{display:block;}/EndhidefromIE-mac/
这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容;在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏;这样就达到了撑开容器的目的;要让IE也完美显示,则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK;