WEB前端开发工程师面试题
1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
Doctype声明位于文档中的最前面的位置,处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式和混杂模式(quirks mode)。在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器(比如Microsoft IE 4和Netscape Navigator 4)的行为以防止老站点无法工作。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。对于HTML 4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
2.行内元素有哪些?块级元素有哪些?CSS的盒模型?
行内元素有:a b span I b em img input select strong
块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
盒模型:margin border padding width
3.CSS引入的方式有哪些? link和@import的区别是?
1.使用 LINK标签
将样式规则写在.css的样式文件中,再以<link>标签引入。
<link rel=stylesheet type="text/css" href="example.css">
2.使用@import引入
跟link方法很像,但必须放在<STYLE>...</STYLE> 中
<STYLE TYPE="text/css">
<!--
@import url(css/example.css);
-->
</STYLE>
3.使用STYLE标签
将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css">
<!--
body {color: #666;background: #f0f0f0;font-size: 12px;}
td,p {color:#c00;font-size: 12px;}
-->
</STYLE>
4.使用STYLE属性
将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
5.使用<span></span>标记引入样式
<span style="font:12px/20px #000000;">cnwebshow.com</span>
两者区别:加载顺序的差别。当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:
main.css
———————-
@import “sub1.css”;
@import “sub2.css”;
这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。
4.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
l通配选择符* { sRules }
l类型选择符E { sRules }
td { font-size:14px; width:120px; }
l属性选择符
E [ attr ] { sRules }
E [ attr = value ] { sRules }
E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules }
h[title] { color: blue; }/* 所有具有title属性的h对象 */
span[class=demo] { color: red; }
div[speed="fast"][dorun="no"] { color: red; }
a[rel~="copyright"] { color:black; }
l包含选择符E1 E2 { sRules }
table td { font-size:14px; }
l子对象选择符E1 > E2 { sRules }
div ul>li p { font-size:14px; }
lID选择符 #ID { sRules }
l类选择符E.className { sRules }
l选择符分组
E1 , E2 , E3 { sRules }
l伪类及伪对象选择符
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-size font-family color
不可继承的一般有:border padding margin background-color width height等
============================
关于CSS specificity
CSS 的specificity 特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表:
规则:
1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。
如:<div style=”color: red”>sjweb</div>
外部定义指经由<link>或<style>标签定义的规则;
2.!important声明的Specificity值最高;
3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;
4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。
算法:
当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加,
{数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity,
然后在比较取舍时按照从左到右的顺序逐位比较。
实例分析:
1.div { font-size:12px;}
分析:
1个元素{ div},Specificity值为0,0,0,1
2.body div p{color: green;}
分析:
3个元素{ body div p },Specificity值为0,0,0,3
3.div .sjweb{ font-size:12px;}
分析:
1个元素{ div },Specificity值为0,0,0,1
1个类选择符{.sjweb},Specificity值为0,0,1, 0
最终:Specificity值为 0,0,1,1
4.Div # sjweb { font-size:12px;}
分析:
1个元素{ div },Specificity值为0,0,0,1
1个类选择符{.sjweb},Specificity值为0,1,0, 0
最终:Specificity值为 0,1,0,1
5.html > body div [id=”totals”] ul li > p {color:red;}
分析:
6个元素{ html body div ul li p} 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 ,另外在同级样式按照申明的顺序后出现的样式具有高优先级。
5.前端页面由哪三层构成,分别是什么?作用是什么?
网页分成三个层次,即:结构层、表示层、行为层。
网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P 标签表达了这样一种语义:“这是一个文本段。”
网页的表示层(presentation layer) 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
6.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
7.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?
IE内核浏览器:360,傲游,搜狗,世界之窗,腾讯TT
非IE内核浏览器:firefox opera safari chrome
1.就是ie6双倍边距的问题,在使用了float的情况下,不管是向左还是向右都会出现双倍,最简单的解决方法就是用display:inline;加到css里面去。
2.文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要,在高度上我们不能容忍1px 的差异。
3. ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。
4. 还讨论内容撑破容器问题,横向上的。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。
5. 浮动的清除,ff下不清除浮动是不行的。
6. mirrormargin bug,当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。解决方案:外层元素设定border 或 设定float。
7. 吞吃现象,限于篇幅,我就不展开了。还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
8. 注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
9. <li/>里加 float <div/>,这是一个典型的,棘手的兼容问题,希望引起大家正视 ,给li 不同的属性会有不同的解释效果,ff下的解释稍可理解,ie6下的解释会让你摸不着头脑,由于问题的复杂性,将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果,却没给出问题解决的过程。
10. img下的留白。解决方案:给img设定 display:block。
11. 失去line-height。<div style=”line-height:20px”><img />文字</div>,很遗憾,在ie6下单行文字 line-height 效果消失了。。。,原因是<img />这个inline-block元素和inline元素写在一起了。解决方案:让img 和文字都 float起来。
12. 链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时,链接里包含的图片宽度变化,可惜在ie6下无效,ie7、ff下有效。
13. 非链接的hover状态。div:hover{} 这样的样式ie6是不认的,在ie7、ff下才有效果。
14. ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案:给overflow:hidden加position:relative或者position:absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。
15. ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。
16. ie6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。
17. ie6下的bug,<head></head>内有<base target=”_blank”/>的情况下,position:relative层下的float层内文字无法选中。
18. 终于来了个ff的缺点。width:100%这个东西在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:100%才行,累啊。opera这点倒学乖了跟了ie。
8.如何居中一个浮动元素?
设置容器的浮动方式为相对定位,然后确定容器的宽高,比如宽500 高 300 的层,然后设置层的外边距。
div{Width:500px;height:300px;Margin: -150px 0 0 -250px;position:relative;left:50%;top:50%;}
9.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况!
HTML5标签的改变:<header>, <footer>, <dialog>, <aside>, <figure>, <section> 等
IE9以上开始支持
CSS3实现圆角,阴影,对文字加特效,增加了更多的CSS选择器。
10.如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?
11.你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
.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;}
* html .clearfix {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;}/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。 在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的。要让IE也完美显示,则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。
WEB前端开发工程师面试题相关推荐
- 深圳乐创互联科技有限公司 - (web前端开发工程师机试题)
web前端开发工程师机试题 面试要求可查看上方链接 效果图 代码 css: * {margin: 0;padding: 0;list-style: none;text-decoration: none ...
- 前端开发工程师面试题2
前端开发工程师面试题2 1.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1). 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. ...
- Web前端开发工程师必读de设计博客
2019独角兽企业重金招聘Python工程师标准>>> Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要,无论是学习新技术,还是寻找免费资源与工具 ...
- Web前端开发——BAT面试题汇总及答案01
目录: 目录: HTML&CSS篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2.每个 HTML 文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 3 ...
- 想成为一个Web前端开发工程师,需要掌握哪些知识?
前端工程师已经成为目前互联网企业极具竞争力的人才,为了招聘到优秀的Web前端开发工程师,企业不断的提升薪资水平.因此,有越来越多的人加入到了学习Web前端行列.那么,想成为一名web前端开发工程师需要 ...
- 想成为一个Web前端开发工程师,需要掌握的详细知识总结
前端工程师已经成为目前互联网企业极具竞争力的人才,企业不断提升薪资水平为了招聘到优秀的Web前端开发工程师.因此,越来越多的人想要学习Web前端.那么呢?Web前端的学习路线是什么? 想成为一个Web ...
- Web前端开发工程师到底是干什么的?
Web前端开发工程师其实是查BUG,改BUG,写BUG.哈哈,以上内容纯属开玩笑.事实上,Web前端开发工程师简单地说,就是使用HTML.CSS.JavaScript等技术来实现客户端(手机和电脑)上 ...
- 如何学习才能成为优秀的Web前端开发工程师?
随着Web前端技术的广泛应用,Web前端开发工程师也成为了热门的岗位之一,并且吸引了很多人想要转行成为Web前端开发工程师.那么如何学习才能成为Web前端开发工程师呢? 如何学习才能成为优秀的Web前 ...
- web前端开发工程师的竞争力体现在哪里?
web前端开发工程师的核心竞争力体现诸多方面.这个不可替代性我们可以理解为与其他计算机细分领域.应用场景相比,前端开发的核心优势体现在哪些方面?或者有哪些独特的属性? 直面用户,前端更擅长从用户视角出 ...
最新文章
- LRU算法确定最后使用时间的顺序-栈
- 4.3 vsftpd文件共享
- android componentname activity,ComponentName的使用
- 剪纸游戏(博弈论)(SG函数)
- webpack指定第三方模块的查找路径
- Pycharm 项目运行的多种技巧
- 300WLP、AFLW2000-3D、Biwi Kinect Head Pose Database姿态数据的读取
- Leetcode 109
- 【数据科学系统学习】机器学习算法 # 西瓜书学习记录 [8] 支持向量机(二)...
- Chrome浏览器提示您的连接不是私密连接解决办法
- SQL Prompt教程:使用SQL提示代码分析避免T-SQL技术债务
- 塔菲克蓝牙适配器驱动_TAFIQ蓝牙适配器驱动(TAFIQ蓝牙设备驱动程序)V4.1 正式版...
- python的词性标注
- 致丰巢:品牌管理,才是长久之计
- 【html+css+js】用前端做一个视频播放器页面
- UAAC 访问 Predix UAA 入门
- 有关 英语学习的一些网站
- caffe把数据转化为lmdb格式zxw.sh
- vuejs管理系统模板_2020年22种最佳VueJS管理员仪表板模板
- 学生档案信息管理之模板引擎的应用
热门文章
- 信息学奥赛一本通 1255:迷宫问题 | OpenJudge NOI 2.5 7084:迷宫问题
- springcloud 项目maven依赖:Failure to find org.springframework.cloud:spring-cloud-dependencies
- (2016年8月2号) 台风 从零开始
- Inno Setup使用教程【收藏】
- Echarts - lengend图例自定义
- java实现文字转语音功能(仅Windows)
- ubuntu 修改IP ifdown: interface eth0 not configured
- 市场调研-环保型烟花市场现状及未来发展趋势
- 三星s10更新Android10,经历了三星s10的最近一次升级,我对安卓对三星有了新的认知...
- ( 题解 )第六届蓝桥杯决赛试题 -- 完美正方形 (线段树 + 深搜)