前端常见问题总结
Posted 我就是那个王小明
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端常见问题总结相关的知识，希望对你有一定的参考价值。
一、什么是web标准？
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括Xhtml和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
二、为什么将css引入放头部，js引入放后面
浏览器从上到下依次解析html文档。将css文件放到头部，css文件可以先加载。避免先加载body内容，导致页面一开始样式错乱，然后闪烁。将javascript文件放到底部是因为：若将javascript文件放到head里面，就意味着必须等到所有的javascript代码都被下载、解析和执行完成之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟，窗口一片空白。
三、css的引入
一般来说只有3种：
1.最常用的，引入样式表，在样式表中编写样式，引入方式如下：
<link
href="css/style.css" rel="stylesheet"
type="text/css">
2.在Html头部用<style></style>包起来，在这里面编写样式：
<style
type="text/css">
*{
padding:
0;margin: 0
}
</style>
3.在标签里面直接编写行内样式。
<div
style="color: #333"><div>
四、link和@import的区别
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
5、 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核 Trident) 火狐(Gecko) 谷歌(webkit) opear(Presto)
6、写出几种IE6 BUG的解决方法
1.双边距BUG
float引起的
使用display
2.3像素问题
使用float引起的
使用dislpay:inline
-3px
3.超链接hover
点击后失效
使用正确的书写顺序 link visited hover active
4.Ie
z-index问题
给父级添加position:relative
5.Png
透明
使用js代码
改
6.Min-height
最小高度
!Important 解决’
7.select
在ie6下遮盖
使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)
9.ie 6 不支持!important
7、relative和absolute的区别
（1）、一般父元素用relative：绝对定位。
第一种：有父元素，参照父级元素的原始点为原始点，当父级元素有padding等css属性的时候，当前级的原始点参照父级元素的内容区原始点进行定位；
第二种：无父级元素，就用body的原始点为原始点并配合TRBL进行定位。
（2）、absolute绝对定位：一般用在子元素上并配合TRBL进行定位。
第一种：设置了TRBL，无论父元素有没有设置position属性，参照点是浏览器的左上角，配合TRBL进行定位
第二种：没有设置TRBL，默认一句父级元素的坐标原始点为原始点
第三种：设定了TRBL，并且父级元素没有position属性，那个还是以浏览器左上角进行定位。
8、img标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息
9、解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数
10、浏览器标准模式和怪异模式之间的区别是什么
所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。
IE6不认识!important声明，IE7、IE8、Firefox、Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识!important声明，这只是区别的一种，还有很多其它区别。
到底都有哪些声明呢？哪种声明更好呢？我们建议你使用XHTML 1.0最严格模式，从一开始我们就应该严格的要求自己
，具体声明如下：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> |
如果你接手的是一个遗留网页，最初并没有DTD声明，并且使用了很多在XHTML中已经废除的标签，那么，我们建议你使用XHTML兼容模式，声明如下：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> |
11、清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both(理论上能清楚任何标签，增加无意义的标签)
2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)
3.是用afert伪元素清除浮动(用于非IE浏览器)
12、css hack
_marging \\IE 6
+margin \\IE 7
Marging:0 auto \9 所有Ie
Margin \0 \\IE 8
以上是关于前端常见问题总结的主要内容，如果未能解决你的问题，请参考以下文章