前端面试题

1、让文字居中的CSS代码是（text-align：center）
2、设置CSS属性clear的值为（both）时可清楚左右两边的浮动
3、CSS属性（margin）可为元素设置外补丁。内补丁为padding
4、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
行内元素：span、a、strong、b、s、i、sup、sub、u
块级元素：p、div、h1-h6、ul、li、ol
空（void）元素：input、img、br、hr
5、link与@import的区别？
a)link是XHTML标签，除了加载css外，还可以定义RSS等其他事物，而@import只能加载CSS
b)link引css时，在页面载入时同时加载，而@import需要页面为完全载入才会加载
c)link是XHTML标签，无兼容性的问题，@import在css2.1提出，低版本浏览器存在兼容性问题
d)link可以使用javascript进行DOM操作，而@import不能。
6、css选择器有哪些？哪些属于可以继承？优先级算法如何计算？css3新增的伪类有哪些？
通配选择器（*）、属性选择器、id选择器、类（class）选择器、子代选择器（E1>E2）、父代选择器（E1 E2）
font-size、
！important>id>class
7、如何居中div？如何居中一个浮动元素？
margin：0 auto；
margin-left：（父元素的宽度-自身的宽度）/2

8、浏览器的兼容性有哪些？浏览器的有哪些内核？
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
#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;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

* IE下,event对象有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 {}

* 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：`<doctype html>`

* 上下margin重合问题
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
* ie6对png图片格式支持不好(引用一段脚本处理)
9、HTML5、CSS3有哪些新的特性，废除了哪些元素，如何处理HTML5新标签兼容性的问题，如何分别HTML与HTML5?
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

* 拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

* 移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

* IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何区分： DOCTYPE声明\新增的结构元素\功能元素
10、列出display的值，说明他们的作用？列出position的值。说明他们的作用，relative和absolute定位原点是？
1.
block 象块类型元素一样显示。
inline 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。

2.
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。

*relative
生成相对定位的元素，相对于其在普通流中的位置进行定位。

* static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。

* inherit 规定从父元素继承 position 属性的值。
11、一张效果图大致内容是一个图片列表，ul内边距左：10px 右：10px .ul中的li左边距30px。
但最后一个li距离ul只有10px，也就是ul有边框，里面的li图片列表也有边框。（这些属性 是定死的，你不能修改，要求写出这段css代码）
大致方法是，ul设置左右内边距后，设置li的margin负值，这样li在ul的框里就居中了 。还有一种比较傻瓜的办法，设置li的margin-right:30px的后，最后一个li需要改 class，把margin-right清掉。

本文章由javascript技术分享原创和收集