HTML和CSS面试题

1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）<!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。 （2）行内元素有：a b span input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：

---

3.CSS的盒子模型有几种？各有什么特点？ （1）两种，IE 盒子模型、标准 W3C 盒子模型； 加粗样式
（2）标准盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border). IE盒模型：content部分包含了 border 和 pading;
4.link 和@import 的区别是?
（1）link属于HTML标签，而@import是CSS提供的;
（2）页面被加载的时，link会同时被加载，而@import会等CSS被加载完再加载;
（3）import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
（4）link方式的样式的权重 高于@import的权重.
5.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li: nth - child） 可继承： font-size font-family color, UL LI DL DD DT; 不可继承 ：border padding margin width height ; 优先级就近原则，样式定义最近者为准; 载入样式以最后载入的定位为准;优先级为: !important > id > class > tag important 比内联优先级高CSS3新增伪类举例： p:first-of-type 选择属于其父元素的首个

元素的每个

元素。 p:last-of-type 选择属于其父元素的最后

元素的每个

元素。 p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。 p:only-child 选择属于其父元素的唯一子元素的每个

元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。 :enabled、:disabled 控制表单控件的禁用状态。 :checked，单选框或复选框被选中。6.如何居中div,如何居中一个浮动元素?给div设置一个宽度，然后添加margin:0 auto属性 div{width:200px;margin:0 auto;} 居中一个浮动元素 .div { Width:500px ; height:300px;//高度可以不设 Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%; }
7.浏览器的内核分别是什么? 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
1. IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；
2.浏览器默认的margin和padding不同。解决方案是加一个全局的 *{margin:0;padding:0;}来统一。 IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin 比设置的大。 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 — —_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)渐进识别 的方式，从总体中逐渐排除局部。
3.首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 .bb{ background-color:#f1ee18;/所有识别/ .background-color:#00deff\9; /IE6、7、8识别/ +background-color:#a200ff;/IE6、7识别/ _background-color:#1e0bd1;/IE6识别/ }
4.IE下,可以使用获取常规属性的方法来获取自定义属性, 解决方法:统一通过getAttribute()获取自定义属性. IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决. 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover 和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}css属性那些有继承性？哪些没有？有继承性的属性：color ,font-size,font-weight没有继承性的属性：border,width,height如果孩子都为浮动，父类会没有高度，如何解决 解决方法：（1）给父类设置相应的高度 （2）创建一个孩子对象，设置清除浮动 (3) 设置父类为overflow：hidden（4）设置：afterhe before清除浮动