一、CSS引入的方式有哪些?它们的区别是?

参考网址:http://blog.163.com/njq_166/blog/static/11263806120104183237651/

          在HTML中引入CSS的方法主要有四种,它们分别是行内式、内嵌式、导入式链接式

1.行内式
          行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

2.嵌入式
          嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中,缺点是对于一个包含很多网页的网站,在每个网页中使用嵌入式,进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。

3.导入式
          将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中,使用的语法如下:

          <style type="text/css">

                    @import"mystyle.css"; 此处要注意.css文件的路径

         </style>

         导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。

4.链接式
          也是将一个.css文件引入到HTML文件中,但它与导入式不同的是链接式使用HTML规则引入外部CSS文件,它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件。

          使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

总结:一般来说,做网站时把样式多写在多个样式表文件中,因此我们先用链接式引入一个总的CSS文件,然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式

 

二、你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?解决方法是什么?

参考网址:http://www.iplaysoft.com/browsers-engine.html

1、Trident 内核(Windows)

          基于Trident内核的浏览器非常多,这是因为Trident内核提供了丰富的调用接口,常常被称为IE内核。目前可供调用的最新版的Trident内核是IE9所用的内核,相较之前的版本对W3C标准的支持增强了很多。

          Trident内核的常见浏览器有:
IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0);
世界之窗、 360安全浏览器、傲游;搜狗浏览器;腾讯TT;阿云浏览器(早期版本)、百度浏览器(早期版本)、瑞星安全浏览器、Slim Browser; GreenBrowser、爱帆浏览器(12 之前版本)、115浏览器、155浏览器; 闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器;
其中部分浏览器的新版本是“双核”甚至是“多核”,其中一个内核是Trident,然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”,而Trident则是“兼容浏览模式”,用户可以来回切换。

2、Gecko(跨平台)

          目前最主流的Gecko内核浏览器是Mozilla Firefox,所以也常常称之为火狐内核。另外就是有一些其它软件借用了Gecko内核。

          常见的Gecko内核的浏览器:

Mozilla Firefox、Mozilla SeaMonkey、Epiphany(早期版本)、Flock(早期版本)、K-Meleon

3、KHTML(Linux)
          KDE开发的内核,速度快捷,容错度低

          常见的KHTML内核的浏览器:Konqueror

4、WebKit(跨平台)
          由KHTML发展而来,也是苹果给开源世界的一大贡献。是目前最火热的浏览器内核。因为是脱胎于KHTML,所以也是具有高速的特点,性能非常好,而且对W3C标准的支持很完善。

          常见的WebKit内核的浏览器:

Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Andriod默认浏览器

 

5、Chromium(跨平台)
         Chromium 就是 WebKit,Chromium把WebKit的代码梳理得可读性提高很多。

 

         常见的Chromium内核的浏览器:

Google Chrome、Chromium、SRWare Iron、Comodo Dragon

6、Presto(跨平台)
         Opera 所采用的内核,准确地说,是Opera 7.0及以后版本的内核,Opera 3.5-6.1版本使用的内核叫做Elektra。Presto对W3C标准的支持也是很良好的。Presto优先解析文字,保证可阅读性,媒体资源的渲染放后。

         常见的Presto内核的浏览器:Opera

参考网址:http://www.cnblogs.com/lgmcolin/archive/2013/02/12/2910179.html

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

        2.IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。解决方案是在float的标签样式控制中加入display:inline;将其转化为行内属性。

        3.在ie6,ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。解决方案是加上overflow:hidden或设置line-height为更小的高度。加了line-height:2px后还要加上font-size才行。

        4.min-height在IE6下不起作用。解决方案是添加 height:auto !important;height:xxpx;其中xx就是min-height设置的值。

        5.透明性IE用filter:Alpha(Opacity=60),而其他主流浏览器用 opacity:0.6

        6.input边框问题。去掉input边框一般用border:none;就可以,但由于IE6在解析input样式时的BUG(优先级问题),在IE6下无效。ie6的默认CSS样式,涉及到border的有border-style:inset;border-width:2px;浏览器根据自己的内核解析规则,先解析自身的默认CSS,再解析开发者书写的CSS,达到渲染标签的目的。IE6对INPUT的渲染存在bug,border:none;不被解析,当有border-width或border-color设置的时候才会令IE6去解析border-style:none;。

 

        解决方案是用:border:0或border:0 none;或border:none;border-color:transparent;,推荐用第三种方案。

        7.a(有href属性)标签嵌套下的img标签,在IE下会带有边框。解决办法是加上a img{border:none;}样式。

        8.父子标签间用margin的问题,表现在有时除IE(6/7)外的浏览器子标签margin转移到了父标签上,IE6&7下没有转移。解决办法就是父子标签间的间隔建议用padding,兄弟标签间用margin

        9.假设两块div,第一块浮动而第二块没有浮动,IE6下第二块就会跑到第一块边上,并且二者之间还留有间距,但标准浏览器中是第二块重合于第一块。解决办法是改变设计思路。

        10.父子关系的标签,子标签浮动导致父标签不再包裹子标签。是因为float造成的,解决方案是清除浮动就行了。

 参考网址:http://blog.csdn.net/chuyuqing/article/details/37561313    

        浏览器兼容问题一:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

 

问题症状:IE6里的间距比超过设置的间距

 

碰到几率:20%

 

解决方案:在display:block;后面加入display:inline;display:table;

 

备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:table。

         浏览器兼容问题二:图片默认有间距

问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。

碰到几率:20%

解决方案:使用float属性为img布局

备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用)

       

三、有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况。

 参考网址:http://www.yixieshi.com/ucd/9859.html

 

 

四、js是什么?js和html的开发如何结合?

五、ajax是什么?ajax的交互模型?同步和异步的区别?如何解决跨域问题?