web前端面试题Word文档下载推荐.docx

1、首先我讲讲如何触发两种模式： 加入xml头部声明可以触发IE浏览器的Quirks mode，触发之后，浏览器解析方式就和IE5.5一样，拥有IE5.5一样的bug和其他问题，行为（Javascript）也是如此。 IE6的触发 在XHTML的DOCTYPE前加入XML声明 !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Strict/EN http:/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd IE7的触发 在XML声明和XHTML的DOCTYPE之间加入HTML注释 IE6和IE7都可以触发的 在HTML4.01的D

2、OCTYPE文档头部加入HTML注释 DOCTYPE HTML PUBLIC -/W3C/DTD HTML 4.01/EN/www.w3.org/TR/html4/strict.dtd 其次是这样的意义 各个浏览器的混杂模式，基本就是各个浏览器的私有模式，不相互兼容。所以，除非是为了兼容的问题，比如你不想修改很久很久以前做的IE ONLY的网页，否则刻意触发混杂模式没有任何意义。2：行内元素有哪些？块级元素有哪些？CSS的盒模型？一.行内元素和块级元素有哪些？块级元素information on authorblockquotelong quotationbuttonpush buttonca

3、ptiontable captiondddefinition descriptiondeldeleted textdivgeneric language/style containerdldefinition listdtdefinition termfieldsetform control groupforminteractive formh1headingh2h3h4h5h6hrhorizontal ruleiframeinline subwindowinsinserted textlegendfieldset legendlilist itemmapclient-side image m

4、apnoframesalternate content container for non frame-based renderingnoscriptalternate content container for non script-based renderingobjectgeneric embedded objectolordered listpparagraphprepreformatted texttabletabletbodytable bodytdtable data celltfoottable footerthtable header celltheadtable heade

5、rtrtable rowulunordered list行内元素aanchorabbrabbreviated formacronymacronymbbold text stylebdoI18N BiDi over-ridebiglarge text stylebrforced line breakcitecitationcodecomputer code fragmentdfninstance definitionememphasisiitalic text styleimgEmbedded imageinputform controlkbdtext to be entered by the

6、userlabelform field label textqshort inline quotationsampsample program output, scripts, etc.selectoption selectorsmallsmall text stylespanstrongstrong emphasissubsubscriptsupsuperscripttextareamulti-line text fieldttteletype or monospaced text stylevarinstance of a variable or program argument二.行内元

7、素与块级元素有什么不同？1.尺寸-块级元素和行内元素之间的一个重要的不同点行内元素和widthW3C CSS2 标准规定行内元素、非置换元素不会应用width属性。以下例子中，对行内元素应用了width:200px,你可以看到，根本就没有什么效果。行内元素和heightW3C CSS2 标准规定行内元素、非置换元素不会应用height属性，但是盒子高度可以通过line-height来指定。以下例子，对行内元素应用了height:50px,你可以看到什么效果都没。行内元素和padding你可以给行内元素设置padding，但只有padding-left和padding-right生效。以下例子，

8、行内元素应用了padding:50px。你可以看到对左右的内容有影响，但是对上下没影响。行内元素和margingmargin属性也是和padding属性一样，对行内元素左右有效，上下无效。下面的例子,对应用了margin:50px，你可以看到左右边缘是生效了但是内容上下却没有。记住对行内元素设置宽度width 无效。设置高度height 无效，可以通过line-height来设置。设置margin 只有左右margin有效，上下无效。设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的，看图上效果就知道了 盒子模型W3C 组织建议把所

9、有网页上的对像都放在一个盒（box）中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主 要定义四个区域：内容（content）、边框距（padding）、边界（border）和边距（margin）。对于初学者，经常会搞不清楚 margin，background-color，background- image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身

10、有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。盒模型的实际宽度关于盒模型，还有以下几点需要注意：对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩，例如：有上下2个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2个元素的间距为20px（2个边界值中较大的值）。如图所示。注1. 块级元素（display： block）每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始，标题、段落、表格、层、body等都是块级元素。块级元素只能作为其他块级元素的子元素，而且需要一定的条件。内联元素，例如、相应的css

11、为 以下为引用的内容：复制代码代码如下:#IamFloat float:left;5px;/*IE下理解为10px*/ display:/*IE下再理解为5px*/ 关 于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准XHTML标准编写， 较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下，FF和 Opera的CSS解释标准更贴近CSS标准，也更具有规范性。2、IE选择符空格BUG 今天在给博客的段落样式设置首字符样式的时候发现，原来一个空格也可以使样式失

12、效。请看以下代码：-/W3C/DTD XHTML 1.0 Transitional/EN/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/www.w3.org/1999/xhtmlheadtitle/titlestyle type=text/css- pfont-size:12px;p:first-letterfont-size:300% -/style/headbody对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。/p/body/html/code 纵然伤心，也不要