前端开发面试题2

《前端开发面试题2》由会员分享，可在线阅读，更多相关《前端开发面试题2（16页珍藏版）》请在金锄头文库上搜索。

1、1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? （1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 （2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作 （4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。 其次是这样的意义 各个浏览器的混杂模式， 基本就是各个浏览器的私有模式， 不相互兼容。所以，除非是为了兼容的问题，比如你不想修改很久很久以前做的 IE ONLY 的网页

2、，否则刻意触发混杂模式没有任何意义。 2：行内元素有哪些？块级元素有哪些？CSS 的盒模型？ （1）CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认 的 display 值，比如 div 默认 display 属性值为“block”，成为“块级”元素；span 默认 display 属性值为“inline”，是“行内”元素。 （2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4p （3）知名的空元素： 鲜为人知的是： CSS 的盒子

3、模型两种: IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和 padding; 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border). 二.行内元素与块级元素有什么不同？ 不同：行内元素是一个一个挨着的，块级元素是占据一整行。 记住对行内元素 设置宽度 width 无效。 设置高度 height 无效，可以通过 line-height 来设置。 设置 margin 只有左右 margin 有效，上下无效。 设置 padding 只有左右 padding 有效，上下则无效。注意元素范围是增大了，但是对

4、元素周围的内容是没影响的，看图上效果就知道了 盒子模型盒子模型 W3C 组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域： 内容(content)、 边框距(padding)、 边界 (border)和边距(margin)。 对于初学者，经常会搞不清楚 margin， background-color， background- image， padding， content，border 之间的层次、关系和相互影响。这里提供一张盒模型的 3D 示意图，希望便于你的理解和记忆。 每个 H

5、TML 元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。 盒模型的实际宽度 关于盒模型，还有以下几点需要注意： 对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩，例如：有上下 2 个元素，上元素的下边界为 5px，下面元素的上边界为 20px，则实际 2 个元素的间距为 20px（2 个边界值中较大的值）。如图所示。 注 1. 块级元素（display： block） 每个块级元素都从一个新行开始，而且其后的元素也需另起一

6、行开始，标题、段落、表格、层、body 等都是块级元素。块级元素只能作为其他块级元素的子元素，而且需要一定的条件。 内联元素，例如、等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。 注 2. 内联元素（display：inline） 内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如 a、em、span 等等都为内联元素。内联元素可以为任何其他元素的子元素都为内联元素。内联元素可以为任何其他元素的子元素。 浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声

7、明宽度，则其宽度趋向于 0，即压缩到其内容能承受的最小宽度。 如果盒中没有内容，则即使定义了宽度和高度都为 100%，实际上只占 0%，因此不会被显示，此点在采取层布局的时候需特别注意。 边界值可为负，其显示效果各浏览器可能不相同。 填充值不可为负。 边框默认的样式（border-style）为不显示（none）。 3.CSS 引入的方式有哪些? link 和import 的区别是? 本质上，这两种方式都是为了加载 CSS 文件，但还是存在着细微的差别。 1) link 属于 XHTML 标签，而import 完全是 CSS 提供的一种方式。link 标签除了可以加载 CSS 外，还可以做很多

8、其它的事情，比如定义 RSS，定义 rel 连接属性等，import 就只能加载 CSS 了。 2) 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的 CSS 会同时被加载，而import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览import 加载 CSS 的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。 3) 兼容性的差别。由于import 是 CSS2.1 提出的所以老的浏览器不支持，import 只有在 IE5 以上的才能识别，而 link 标签无此问题。 4) 使用 dom 控制样式时的差别。 当使用 javascript

9、 控制 dom 去改变样式的时候，只能使用 link 标签，因为import 不是 dom 可以控制的。 5) link 方式的样式的权重 高于import 的权重。 注： 1，网友提出了另一种区别。 差别 6：import 可以在 css 中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如： main.css - import “sub1.css”; import “sub2.css”; sub1.css - p color:red; sub2.css - .myclass color:blue 这样更利于修改和扩展 提示： 这样做有一个缺点， 会对网站服务器

10、产生过多的 HTTP 请求， 以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码， 他们总会把 css 或 js 直接写在 html里，而不用外部文件。 4.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？ 1) id 选择器（ # myid） 2) 类选择器（.myclassname） 3) 标签选择器（div, h1, p） 4) 相邻选择器（h1 + p） 5) 子选择器（ul id class tag important 比 内联优先级高 CSS3

11、 新增伪类举例： 1) p:first-of-type 选择属于其父元素的首个 元素的每个 元素。 2) p:last-of-type 选择属于其父元素的最后 元素的每个 元素。 3) p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。 4) p:only-child 选择属于其父元素的唯一子元素的每个 元素。 5) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。 6) :enabled、:disabled 控制表单控件的禁用状态。 7) :checked，单选框或复选框被选中。 如何居中 div,如何居中一个浮动元素? 1) 给 div 设置

12、一个宽度，然后添加 margin:0 auto 属性 div width:200px; margin:0 auto; 2) 居中一个浮动元素 ( 确定容器的宽高 宽 500 高 300 的层,设置层的外边距 ) .div Width:500px ; height:300px;/高度可以不设 Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;/方便看效果 left:50%; top:50%; 前端页面有哪三层构成，分别是什么？作用是什么？ 最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行

13、为层。 网页的结构层（网页的结构层（structural layer） 由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词， 对网页内容的语义含义做出了描述， 但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。” 网页的表示层（网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。 网页的行为层（网页的行为层（behavior layer） 负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主

14、宰的领域。 8：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？ IE 浏览器的内核 Trident、 Mozilla 的 Gecko、 google 的 WebKit、 Opera 内核 Presto； 兼容性处理要点 DOCTYPE 影响 CSS 处理 1) png24 为的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8 2) 浏览器默认的 margin 和 padding 不同。解决方案是加一个全局*margin:0;padding:0;来统一。 3) IE6双边距bug:块属性标签float后， 又有横行

15、的margin情况下， 在ie6显示margin比设置的大。浮动 ie 产生的双倍距离 #box float:left; width:10px; margin:0 0 0 100px; 这种情况之下 IE 会产生 20px 的距离， 解决方案是在 float 的标签样式控制中加入 _display:inline;将其转化为行内属性。(_这个符号只有 ie6 会识别) 首先，巧妙的使用“9”这一标记，将 IE 游览器从所有情况中分离出来。 接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。 css .bb background-color:#f1ee18;

16、/*所有识别*/ .background-color:#00deff9; /*IE6、7、8 识别*/ +background-color:#a200ff;/*IE6、7 识别*/ _background-color:#1e0bd1;/*IE6 识别*/ 4) IE 下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute()获取自定义属性;Firefox 下,只能使用 getAttribute()获取自定义属性. 解决方法:统一通过 getAttribute()获取自定义属性。 5) IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性; Firefox 下,event 对象有pageX,pageY 属性,但是没有 x,y 属性。 6) （条件注释）缺点是在 IE 浏览器下可能会增加