HTML学习笔记Day8

一、设置元素背景透明属性{background：rgba（255,255,255,0.5）；}

　　1.元素背景透明，内容正常显示；

　　注：opacity：value；元素背景透明内容也透明；

　　2.rgba分别指red、green、blue、透明度

二、Flash和marquee（滚动字幕）

　　1.插入flash

　　　　1）语法：<object width="value" height="value">

　　　　　　　　　　<param name="movie" value="flash路径及全称" />

　　　　　　　　　　<embed width="value" height="value" src="flash路径及全称"></embed>

　　　　　　　　   </object>

　　　　2）将flash背景设置为透明

　　　　　　<embed wmode="transparent" />

　　　　　　给<embed>标记添加属性：wmode="transparent"

　　　　说明：flash源文件格式.fla，导出影片为.swf，创建播放器格式为.exe，gif格式：.gif

　　　　3）IE中不显示flash,可做如下操作：

　　　　　　A.下载安装flash player；

　　　　　　B.打开IE浏览器，选择工具菜单--Internet选项----安全----低。

　　2.滚动字幕的应用：

　　　　<marquee

　　　　　　behavior（行为）="scroll（滚动）/alternate（晃动）"

　　　　　　direction（方向）="up（从下而上）/down（从上向下）/left（从右到左）/right（从左到右）"

　　　　　　scrollamount（滚动速度）="value"

　　　　　　height（上下滚动范围）="value"

　　　　　　width（左右滚动范围）="value">

　　　　　　内容

　　　　</marquee>

三、图片整合技术（精灵图、雪碧图）

　　1.CSS Sprites的原理：

　　　　1）将背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片整合成一整张图，然后用background-position来实现背景图的定位技术。

　　2.图片整合的优势：

　　　　1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度；

　　　　2）通过图片整合来减少图片的体积；

　　3.图片整合的原则：

　　　　1）边切图边整合；

　　　　2）定位时避免bottom、right等，用具体的数值，为了避免当你的宽度或高度上扩展时出现位置的错误；

　　　　3）将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其他的图片可能会意外出现在本区域内；一般情况下，会将这些小图标整合到文件的最右侧；

　　　　4）单张整合好的sprite图片在100KB以内；

　　　　5）按分类整合图片；

　　　　6）为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍；

　　　　7）整合好的图片必须是背景透明的图片png或者GIF。

　　拓展：滑动门技术

　　　　1）滑动门是一个形象的称呼，它利用css背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果；

　　　　2）通过滑动门技术，可以使css设计出来的导航菜单具有传统布局的图像效果与css布局高效扩展性。

三、浏览器兼容

　　1.常见的主流浏览器：Internet Explorer、Safari、Mozilla Firefox、Google Chrome、Opera、百度、360、搜狗、遨游、世界之窗

　　2.最早的浏览器：Mosaic/Netscape Navigator（网景领航者）（1994~2008）简称NN

　　3.五大浏览器内核：

　　　　•Trident （MSHTML） （三叉戟；三叉线；三齿鱼叉）

　　　　•Gecko （壁虎）

　　　　•Presto （ 迅速的）

　　　　•Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）

　　　　•Blink (由Google和Opera Software开发的浏览器排版引擎)

　　4.五大浏览器内核的代表作：

　　　　*Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的；

　　　　*Gecko：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行；

　　　　*Webkit : 代表作品Safari、Chrome ，是一个开源项目；

　　　　*Presto : 代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎；

　　　　*Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

　　5.为什么会出现兼容问题？

　　　　由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

　　6.CSS Bug、CSS Hack和Filter

　　　　1）CSS Bug：css样式在各浏览器中解析不一致的情况，或者说css样式在浏览器中不能正确显示的问题称为css bug；

　　　　2）CSS Hack：css中，Hack是指一种兼容css在不同浏览器中正确显示的技巧方法，他们都属于个人对css代码的非官方修改，或非官方的补丁，有些人更喜欢使用patch（补丁）来描述这种行为；css hack的弊端：会增加一些css代码，从而增加浏览器的负担；

　　　　3）Filter表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则和声明的方法；本质上讲，Filter是一种用来过滤不同浏览器的Hack类型；

　　7.使用Hack带来的副作用：降低了css代码的可读性，增加了代码的负担；

　　8.设计css hack和filter通常有两种方法：

　　　　1）一种是利用浏览器自身的bug，来隐藏或显示样式或声明；

　　　　2）另一种是利用浏览器对css支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。

　　9.css bug：

　　　　1）图片有边框

　　　　　　bug：当图片加载在IE上会出现边框

　　　　　　hack：给图片加border：0；或border：none；

　　　　2）div中图片间隙

　　　　　　bug：在div中插入图片时，图片会将div下方撑大大约三像素

　　　　　　hack1：将div与img写在同一行上

　　　　　　hack2：将img转为块状元素，添加声明display：block；

　　　　3）双倍浮向（双倍边距只有IE6会出现）

　　　　　　bug：当IE6及更低版本浏览器在解析时，会错误地把浮向边界（margin）加倍显示

　　　　　　hack：给浮动添加声明：display：inline；

　　　　4）默认高度（IE6、IE7）

　　　　　　bug：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）

　　　　　　hack1:给元素添加声明：font-size:0；

　　　　　　hack2：给元素添加声明：overflow:hidden；

　　　　5）表单元素行高对齐不一致

　　　　　　bug：表单元素行高对齐方式不一致

　　　　　　hack:给表单元素添加声明：float:left；

　　　　6)按钮元素默认大小不一

　　　　　　bug：各浏览器中按钮元素大小不一致

　　　　　　hack1： 统一大小/（用a标记模拟）

　　　　　　hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。

　　　　　　hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

　　　　7)百分比bug

　　　　　　bug：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。 （也会受系统影响）

　　　　　　hack: 给右面的浮动元素添加声明：clear:right; 意思：清除右浮动；

　　　　　　　　　　　　　　　　　　　　　  clear:left:清除左浮动

　　　　　　　　　　　　　　　　　　　　　  clear:both:清除两边的浮动

　　　　8)鼠标指针bug

　　　　　　bug：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。

　　　　　　hack: 如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer

　　　　拓展：cursor：auto默认

　　　　　　　　　　   crosshair加号

　　　　　　　　　　   text文本

　　　　　　　　　　　wait等待

　　　　　　　　　　　help帮助

　　　　　　　　　　　progress过程

　　　　　　　　　　　inherit继承

　　　　　　　　　　　move移动

　　　　　　　　　　　ne-resize向上或向右移动

　　　　　　　　　　　pointer手形

　　　　9)透明属性兼容其他浏览器写法：opacity:value;(value的取值范围0-1; 例：opacity:0.5; )

　　　　　　hack：IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)

　　　　10）li列表的BUG

　　　　　　bug1：当父元素(li) 有float：left；子元素(a) 没设置浮动的情况下会出现垂直bug；

　　　　　　hack：给父元素li和子元素a都设置浮动；

　　　　　　bug2：当给li中的a转成block；并且有height,并有float的，li中没设置浮动会出现阶梯显示；

　　　　　　hack：同时给li加float和width：100%；

　　　　11）margin上下重叠

　　　　　　bug：当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父级元素上

　　　　　　hack1：给父级元素添加overflow：hidden；(推荐使用)

　　　　　　hack2：给父元素或者子元素加浮动

　　　　12）margin bug

　　　　　　bug：当两个上下排列的元素，上元素有margin-bottom：30px；下面元素有margin-top:20px；他们中间的距离不会叠加，而是会设置为较大的值

　　10.Filter过滤器

　　　　1）_下划线属性过滤器：选择器{_属性：属性值；}

　　　　　　当一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性二忽略了这个声明，但是在IE6以下低版本浏览器中会继续解析这个规则

　　　　2）“*”、“+”属性过滤器：选择器{*属性：属性值；/+属性：属性值；}

　　　　　　“*”、“+”过滤IE7及以下的浏览器

　　　　拓展：IE8浏览器的兼容符号“\0”，用这个符号来进行HACK技术（选择器{属性：属性值\0;}）；

　　　　　　　兼容IE浏览器符号“\9”（选择器{属性：属性值 \9；}）。