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

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

《WEB前端开发工程师面试题.docx》由会员分享，可在线阅读，更多相关《WEB前端开发工程师面试题.docx（7页珍藏版）》请在冰豆网上搜索。

WEB前端开发工程师面试题

[HTML&&CSS]

1.Doctype?

严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

Doctype声明位于文档中的最前面的位置，处于标签之前。

此标签可告知浏览器文档使用哪种HTML或XHTML规范。

该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。

当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。

为了实现这一点，他们创建了两种呈现模式：

标准模式和混杂模式（quirksmode）。

在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

混杂模式通常模拟老式浏览器（比如MicrosoftIE4和NetscapeNavigator4）的行为以防止老站点无法工作。

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。

如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。

对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。

包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。

DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

2.行内元素有哪些？

块级元素有哪些？

CSS的盒模型？

行内元素有：

abspanIbemimginputselectstrong

块级元素有：

divulollidldtddh1h2h3h4…p

盒模型：

marginborderpaddingwidth

3.CSS引入的方式有哪些?

link和@import的区别是?

1.使用LINK标签

将样式规则写在.css的样式文件中，再以标签引入。

2.使用@import引入

跟link方法很像，但必须放在中

--

　　@importurl（css/example.css）;

-->

3.使用STYLE标签

将样式规则写在标签之中。

--

body{color:

#666;background:

#f0f0f0;font-size:

12px;}

td,p{color:

#c00;font-size:

12px;}

-->

4.使用STYLE属性

将STYLE属性直接加在个别的元件标签里，<元件（标签）STYLE="性质（属性）1:

设定值1;性质（属性）2:

设定值2;...}

5.使用标记引入样式

12px/20px#000000;">

两者区别：

加载顺序的差别。

当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。

@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：

main.css

———————-

@import“sub1.css”;

@import“sub2.css”;

这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。

4.CSS选择符有哪些？

哪些属性可以继承？

优先级算法如何计算？

内联和important哪个优先级高？

●通配选择符*{sRules}

●类型选择符E{sRules}

td{font-size:

14px;width:

120px;}

●属性选择符

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;}

●包含选择符E1E2{sRules}

tabletd{font-size:

14px;}

●子对象选择符E1>E2{sRules}

divul>lip{font-size:

14px;}

●ID选择符#ID{sRules}

●类选择符E.className{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值列表：

规则：

1.行内样式优先级Specificity值为1,0,0,0，高于外部定义。

如：

red”>sjweb