文档介绍：面试题第一部分 HTML+CSS 一、 Doctype 作用?严格模式与混杂模式如何区分?它们有何意义? (1)、<!DOCTYPE> 声明位于文档中的最前面,处于<html> 标签之前。告知浏览器的解析器,用什么文档类型规范来解析这个文档。(2 )、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。(3)、在混杂模式中, 页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。(4 )、 DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。二、行内元素有哪些?块级元素有哪些? 空(void) 元素有那些? (1) CSS 规范规定,每个元素都有 display 属性,确定该元素的类型,每个元素都有默认的 display 值, 比如 div 默认 display 属性值为“ block ”,成为“块级”元素; span 默认 display 属性值为“ inline ”,是“行内”元素。(2 )行内元素有: ab span img input select strong (强调的语气) (1 )、块级元素有: div ul ol li dl dt dd h1 h2 h3 h4 …p (3 )知名的空元素: <br> <hr> <img> <input> <link> <meta> 三、 link 和***@import 的区别是? (1) link 属于 XHTML 标签,而***@import 是 CSS 提供的; (2) 页面被加载的时 link 会同时被加载,而***@import 引用的 CSS 会等到页面被加载完再加载; (3) import 只在 IE5 以上才能识别,而 link 是 XHTML 标签,无兼容问题; (4) link 方式的样式的权重高于***@import 的权重. 四、浏览器的内核分别是什么? IE 浏览器的内核 Trident 、 Mozilla 的 Gecko 、 Chrome 的 Blink ( WebKit 的分支)、 Oper a 内核原为 Presto ,现为 Blink ; 五、常见兼容问题(1 )、 png24 位的图片在 iE6 浏览器上出现背景,解决方案是做成 PNG8. (2 )、浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的*{margin:0;padding:0;} 来统一。(3)、 IE6 双边距 bug: 块属性标签 float 后, 又有横行的 margin 情况下,在 ie6 显示 margi n 比设置的大。(4)、浮动 ie 产生的双倍距离#box{ float:left; width:10px; margin:0 00 100px;} 这种情况之下 IE 会产生 20px 的距离,解决方案是在 float 的标签样式控制中加入——_display:inline; 将其转化为行内属性。(_ 这个符号只有 ie6 会识别) 渐进识别的方式,从总体中逐渐排除局部。首先, 巧妙的使用“\9”这一标记,将 IE 游览器从所有情况中分离出来。接着, 再次使用“+”将 IE8 和 IE7 、 IE6 分离开来,这样 IE8 已经独立识别。 css bb{ background-color:#f1ee18;/* 所有识别*/ background-color:#00deff\9; /*IE6 、7、8 识别*/ +background-color:#a200ff;/*IE6 、7 识别*/ _background-color:#1e0bd1;/*IE6 识别*/ } IE下, 可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute() 获取自定义属性; Firefox 下, 只能使用 getAttribute() 获取自定义属性. 解决方法: 统一通过 getAttribute() 获取自定义属性.* IE下,even 对象有 x,y 属性, 但是没有 pageX,pageY 属性; Firefox 下,even t 对象有 pageX,pageY 属性, 但是没有 x,y 属性.* 解决方法:( 条件注释) 缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性-webkit-text-size-adjust: none; 解决. 超链接访问过后 hove r 样式就不出现了被点击访问过的超链接样式不在具有 hove r和 activ e 了解决方法是改变 CSS 属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:activ